君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result 自動連番できるCSSカウンターを親要素と子要素の入れ子で2つ使う、みたいなやつ 異なるコンテナに含まれる同一要素に自動でナンバリングします 結論から言うと、複数のカウンター名を使えるのでそのまま使えば動作します cssbody {/*sectionsとboxesの2つのカウンター名を設定して初期化*/ counter-reset: sections boxes; } /*親要素のカウンター*/ section { counter-increment: sections; } section::before {/*数字に接頭語を付与*/ content: 'その' counter(sections); } /*子要素のカウンター*/ .box { counter-increment: boxes; } .box::before { content: counter(boxes,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
