CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方
ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
