CSSでz-indexが効かない時の4つの原因とその対応方法
CSSでレイアウトする際、z-indexが期待通りに機能しない時がありませんか？ z-indexは重なり順を定義するプロパティですが、単なる重なり順だけでなく、いくつか複雑なルールがあります。 z-indexがうまく効かない時の主な4つの原因とそれぞれへの対応方法について紹介します。 4 reasons your z-index isn’t working (and how to fix it) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 同じコンテンツ内で積み重なっている要素は出現順に表示され、後の要素は前の要素の上に表示される 2. 要素にpositionが設定されていない 3. opacityやtransformなどのプロパティを設定すると、要素は新しい積み重ねコンテキストに配置される 4. 子要素のz
ノードと要素は別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 12日目） | Ginpen.com
ここで el に上記 <ul> が格納されているものとすると、 el.firstElementChild は最初の <li> になります。想定通りと思います。一方 el.firstChild はというと、 <ul> と最初の <li> の間の「改行とインデント」から成る文字列ノードが格納されています。そう、文字列もノードです。 デモ 他にもこんな感じで「ノード全種から取得」するものと「要素ノードの中から取得」するものとがあります。 parentNode vs parentElementNode children vs childNodes firstChild vs firstElementChild lastChild vs lastElementChild ? previousSibling vs previousElementSibling ? nextSibling vs next
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]Javascript で a 要素のリンクを無効にする方法のまとめ｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」![[JS]Javascript で a 要素のリンクを無効にする方法のまとめ｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a46ca7389609b7634596b8b3fbba8fb31ac3f03d/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F01%2Fjavascript.png)
