CSSで位置とZインデックスを使用してレイアウトフィーチャを作成する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
Webサイトのユーザーインターフェイス（UI）の要素は、さまざまな方法で相互作用して重ね合わせることができるため、CSSレイアウトの制御が困難になります。 要素の配置と他の要素のオーバーレイ方法を設定する1つの方法は、positionプロパティ、z-indexプロパティ、および方向プロパティの組み合わせを使用することです。 top、right、bottom、およびleftの間隔値。 これらのCSSプロパティの経験により、ドロップダウンナビゲーションバーや図のキャプションなどのUI要素を効率的かつ迅速に作成できます。
このチュートリアルでは、ヘッダーにナビゲーション要素を含むコンテンツのページを作成します。 ナビゲーション要素にはドロップダウンサブナビゲーションコンポーネントが含まれ、ページがスクロールされるとヘッダー自体がページの上部に貼り付けられます。 positionプロパティとその値relative、absolute、およびfixedをいくつかの方向プロパティと組み合わせて使用して、この効果を作成します。 次に、z-indexプロパティを操作し、そのプロパティを使用して要素の階層化を管理します。
前提条件
- タイプセレクター、コンビネーターセレクター、およびセレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの経験。
- HTML
Table要素とその視覚的プロパティの理解。これについては、CSSチュートリアルでテーブルのスタイルを設定する方法で学ぶことができます。 - ローカルマシンに
index.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。
サンプルWebページと初期position値の設定
すべてのHTML要素のデフォルトのposition値はstaticであり、これはコンテンツの通常のフローを構成します。 staticの状態は、z-indexプロパティまたはいずれの方向プロパティの影響も受けません。 Webページのレイアウトに柔軟性を持たせるために、後でpositionの値をこのデフォルトから変更します。 このセクションでは、月面旅行Webサイトのページのコンテンツを作成し、要素のpositionに変更を適用します。
まず、テキストエディタでindex.htmlファイルを開きます。 次に、次のHTMLをファイルに追加します。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Destination: Moon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
このHTMLスニペットでは、<meta>要素がテキストに使用する文字セットを定義します。 これにより、アクセント記号などのほとんどの特殊文字が特別なHTMLコードなしでレンダリングされます。 <title>要素は、ブラウザにページのタイトルを提供します。 最初の3つの<link>要素はカスタムフォントMuseoModernoをGoogleFonts からロードし、最後の要素はstyles.cssに追加するスタイルをロードしますファイル。
次に、ページにコンテンツを入力して、スタイルを設定します。 Sagan Ipsum のサンプルコンテンツをフィラーコピーとして使用して、スタイルを操作します。 テキストエディタでindex.htmlに戻り、次のコードブロックから強調表示されたHTMLを追加します。
<html>
<head>
...
</head>
<body>
<main>
<h2>Schedule Your Trip</h2>
<p>Intelligent beings made in the interiors of collapsing stars vanquish the impossible gathered by gravity not a sunrise but a galaxyrise how far away. Extraordinary claims require extraordinary evidence dispassionate extraterrestrial observer a very small stage in a vast cosmic arena descended from astronomers as a patch of light the ash of stellar alchemy. Concept of the number one citizens of distant epochs with pretty stories for which there's little good evidence with pretty stories for which there's little good evidence the carbon in our apple pies a mote of dust suspended in a sunbeam.</p>
<p>Drake Equation white dwarf something incredible is waiting to be known tesseract quasar dispassionate extraterrestrial observer? Concept of the number one intelligent beings kindling the energy hidden in matter extraordinary claims require extraordinary evidence network of wormholes Euclid? Vanquish the impossible citizens of distant epochs as a patch of light inconspicuous motes of rock and gas made in the interiors of collapsing stars a mote of dust suspended in a sunbeam.</p>
<figure>
<img src="images/moon.jpg" alt="The Moon during twilight" />
<figcaption>Photo by <a href="https://unsplash.com/@ilypnytskyi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Igor Lypnytskyi</a> on <a href="https://unsplash.com/collections/9479529/moon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>
<p>Citizens of distant epochs rings of Uranus intelligent beings birth take root and flourish across the centuries. Corpus callosum invent the universe as a patch of light the only home we've ever known a mote of dust suspended in a sunbeam made in the interiors of collapsing stars. Kindling the energy hidden in matter Orion's sword Sea of Tranquility great turbulent clouds with pretty stories for which there's little good evidence extraordinary claims require extraordinary evidence.</p>
<p>A billion trillion take root and flourish extraplanetary gathered by gravity hearts of the stars consciousness. Dispassionate extraterrestrial observer Orion's sword are creatures of the cosmos realm of the galaxies descended from astronomers white dwarf. The carbon in our apple pies globular star cluster across the centuries a very small stage in a vast cosmic arena radio telescope vanquish the impossible. Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
</main>
</body>
</html>
index.htmlに追加したコードは、<main>要素内にある見出しと4つの段落を作成します。 2番目の段落の後に、<figure>要素が作成され、2番目の段落の後にmoon.jpg画像が読み込まれます。 <figure>要素には、画像の引用情報を含む<figcaption>要素も含まれます。 変更をindex.htmlに保存します。
ここにリンクされている画像を表示するには、月の画像が必要です。 まず、index.htmlファイルと同じフォルダにimagesディレクトリを作成します。
- mkdir images
ブラウザを使用してこのファイルを新しく作成したimagesディレクトリにダウンロードするか、次のcurlコマンドを使用してコマンドラインからダウンロードします。
- curl -sL https://assets.digitalocean.com/articles/68084/moon.jpg -o images/moon.jpg
画像ができたので、Webブラウザを開きます。 ファイルメニュー項目を選択し、開くオプションを選択して、ブラウザにindex.htmlファイルをロードします。 次の画像は、このHTMLがブラウザでどのようにレンダリングされるかを示しています。
次に、スタイルを書き始めます。 テキストエディタに戻り、styles.cssを開きます。 次のコードブロックには、body、main、figure、img、およびh2要素の開始スタイルが含まれています。
body {
margin: 0;
font: 1rem / 1.5 sans-serif;
}
main {
margin: 6rem auto;
width: 95%;
max-width: 75ch;
font-size: 1.125rem;
}
figure {
margin: 2rem 0;
padding: 0;
}
img {
max-width: 100%;
display: block;
}
h2 {
font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
color: hsl(300, 40%, 30%);
}
追加したものをstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 これで、デフォルトのフォントサイズが設定され、コンテンツ領域がページの中央に配置され、画像に適切なスペースが割り当てられて、スタイルが統合されます。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
テキストエディタでstyles.cssに戻ります。 次に、次のコードブロックから強調表示されたCSSを追加して、月の画像のキャプションを定義します。
...
figcaption {
display: inline-block;
color: white;
background-color: hsl(210, 40%, 10%);
padding: 0.25rem 1rem;
}
figcaption a {
color: inherit;
}
figcaption要素セレクターは、画像をinline-blockとして設定し、コンテンツの幅と同じ幅にします。 figcaptionのスタイルも、背景を濃い紫に設定し、テキストは白で、全体に少しパディングがあります。 次に、figcaption a子孫セレクターは、color値をinheritに設定し、デフォルトのblueの代わりに親のwhiteを使用します。
styles.cssに追加したものを保存し、ブラウザでindex.htmlを更新します。 次の画像に示すように、<figcaption>要素は、白いテキストを含む暗い背景ブロックとして表示されます。
次に、positionプロパティの操作を開始するには、テキストエディタでstyles.cssに戻ります。 figcaption要素セレクターブロックに、positionプロパティを追加します。 次に、次のコードブロックで強調表示されているように、relative値を使用します。
...
figcaption {
position: relative;
display: inline-block;
color: white;
background-color: hsl(210, 40%, 10%);
padding: 0.25rem 1rem;
}
...
positionプロパティのrelative値は、コンテンツのフローに関してはstaticと同じように動作します。 ただし、staticのデフォルト値とは異なり、relativeの値では、配置とレイヤーのオプションをシフトするために、方向プロパティとz-indexプロパティを使用できます。
この変更をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 新しいプロパティによる違いはありません。
このセクションでは、プロジェクトの初期HTMLとCSSを設定します。 また、最初のpositionプロパティを記述し、ficaptionの値をrelativeに設定しました。 次のセクションでは、方向プロパティを適用して、figcaptionコンテンツを画像上に移動および配置します。
方向プロパティを使用した要素の配置
top、bottom、right、およびleftの4つの方向プロパティがあります。 これらのプロパティは、positionがstatic以外の有効な値に設定されている要素でのみ機能します。 これらの4つのプロパティはそれぞれ、パーセンテージを含む、単位ベースの正または負の数値を受け入れます。 また、autoのキーワード値を受け入れます。これを使用して、これらのプロパティをデフォルトに戻すことができます。 このステップでは、これらのプロパティを使用して、figcaption要素をこれらの4つの方向のいずれかに移動します。
方向プロパティの使用を開始するには、テキストエディタでstyles.cssを開きます。 figcaption要素セレクターに戻り、positionプロパティと値の後にtopプロパティを追加します。
...
figcaption {
position: relative;
top: -4rem;
display: inline-block;
color: white;
background-color: hsl(210, 40%, 10%);
padding: 0.25rem 1rem;
}
...
このコードでは、topの値を-4remに設定します。 topプロパティの正の値は要素を上から押し下げますが、負の値は要素を最初の配置の上端から引き上げます。
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 次の画像に示すように、キャプション情報が写真にオーバーレイされ、左側がハグされています。
このブラウザのデフォルト言語は左から右の方向に設定されているため、要素は左側にあります。 ブラウザまたはページが代わりに右から左への言語用に設定されている場合、position要素は画像の右側にあります。
positionの値をrelativeに設定すると、方向プロパティの影響が制限されます。 方向プロパティ値を0に設定すると、期待される意図された結果は、要素が間隔なしでその側に沿って配置されることですが、relative値は、中断しない場合にのみこれを行います。ページのコンテンツの通常のフロー。
この制限を実際に確認するには、topプロパティを削除し、次のrightおよびbottomプロパティを追加します。
...
figcaption {
position: relative;
right: 0;
bottom: 1rem;
display: inline-block;
color: white;
background-color: hsl(210, 40%, 10%);
padding: 0.25rem 1rem;
}
...
このスニペットでは、rightプロパティを0の値に設定します。 次に、値が1remのbottomプロパティを追加しました。 変更内容をstyles.cssに保存してから、ブラウザでindex.htmlを更新してください。 予想される動作は、<figcaption>要素が右側にあり、写真の下部の少し上にあることです。 ただし、次の画像が表示されているように、要素はまだ左側にあり、写真の上にかろうじて表示されています。
このセクションでは、4つの方向プロパティのうち3つを使用して、<figcaption>要素を写真上に移動しました。 方向プロパティは、static以外のキーワード値を使用するposition要素でのみ使用でき、方向プロパティは、すべてのコンテンツをrelative値に揃えることができる場所で制限されます。 。 次のセクションでは、positionの値をrelativeからabsoluteに変更して、この問題を修正します。
relativeとabsoluteの関係を使用する
staticとrelativeのpositionの値は、ページ上のコンテンツのフローとどのように相互作用するかという点で類似しています。 relative値で方向プロパティを使用して、ページレイアウト内の要素を移動できますが、この移動によってコンテンツのフローが中断されることはありません。 このセクションでは、absolute値を使用して、要素がページのコンテンツとどのように連携するかをより正確に制御および調整します。
テキストエディタでstyles.cssを開き、figcaption要素セレクタに移動します。 次に、次のコードブロックで強調表示されているように、positionプロパティ値をrelativeからabsoluteに変更します。
...
figcaption {
position: absolute;
right: 0;
bottom: 1rem;
display: inline-block;
color: white;
background-color: hsl(210, 40%, 10%);
padding: 0.25rem 1rem;
}
...
このプロパティ値をstyles.cssに保存します。 次に、ブラウザに戻ってindex.htmlを更新します。 これで、要素はページ全体の右側に配置され、ページの上部にスクロールするとウィンドウの下部に配置されます。 次の画像は、このコード変更がブラウザでどのようにレンダリングされるかを示しています。
positionの値をrelativeからabsoluteに変更する場合、absolute要素には方向プロパティ値を適用するためのコンテキストが必要です。 コンテキストは、position値も持つ祖先要素によって定義されます。 ブラウザがposition値の祖先を見つけることができない場合、コンテキストはブラウザのウィンドウになります。 この場合、bottomの値は、要素1remをブラウザウィンドウの下から上に配置します。 次に、rightプロパティは、ウィンドウの右端に沿って要素を設定します。
<figcaption>を写真にオーバーレイし、写真の右端に揃えるには、コンテキストを変更する必要があります。 これを行うには、positionプロパティをrelativeの値に設定された最も近い祖先要素に適用します。 これにより、<figcaption>要素に、要素を移動する方向プロパティの開始点が提供されます。
<figcaption>要素の新しいコンテキストの設定を開始するには、テキストエディタでstyles.cssに戻ります。 次に、figure要素セレクターに移動します。<figure>要素は<figcaption>の最も近い祖先であるためです。 figureセレクターブロックで、次のコードブロックで強調表示されているように、値relativeに設定された新しいpositionプロパティを追加します。
...
figure {
margin: 2rem 0;
padding: 0;
position: relative;
}
...
この更新をstyles.cssに保存してから、Webブラウザーでindex.htmlを更新してください。 <figcaption>は、ページの右下隅から写真の右下隅に移動します。 次の画像は、ブラウザで変更がどのようにレンダリングされるかを示しています。
これで、relativeとabsoluteの組み合わせを使用して、absoluteに配置された要素の配置を制御し、目的の要素が配置される場所を微調整しました。 次のセクションでは、学習した内容を使用して、absoluteポジショニングのより高度な使用法を作成し、ホバーベースのドロップダウンナビゲーションを作成します。
absoluteポジショニングでドロップダウンナビゲーションバーを作成する
positionプロパティのより一般的な使用法の1つは、ドロップダウンナビゲーションシステムです。 このセクションでは、HTMLを記述してから、ホバー操作によってアクティブ化されるドロップダウンナビゲーションを使用してサイトヘッダーを作成するためのスタイルを記述します。
ドロップダウンナビゲーションの作成を開始するには、テキストエディタでindex.htmlを開きます。 次に、<body>タグ内の<main>要素の前に<header>要素を作成します。 <header>内に、ページの<h1>タイトルを作成し、その後にネストされた順序なしリストで満たされた<nav>タグを作成します。
<!doctype html>
<html>
<head>
...
</head>
<body>
<header>
<h1>Destination: <strong>Moon</strong></h1>
<nav>
<ul class="nav nav-main">
<li class="item-top">
<a href="#" class="link link-top">Base Station</a>
</li>
<li class="item-top">
<a href="#" class="link link-top">Travel Packages</a>
<ul class="nav nav-sub">
<li>
<a href="#" class="link link-sub">Apollo Sights</a>
</li>
<li>
<a href="#" class="link link-sub">Great Craters</a>
</li>
<li>
<a href="#" class="link link-sub">Mare the Merrier</a>
</li>
</ul>
</li>
<li class="item-top">
<a href="#" class="link link-top">Accommodations</a>
<ul class="nav nav-sub">
<li>
<a href="#" class="link link-sub">The Armstrong Hotel</a>
</li>
<li>
<a href="#" class="link link-sub">Lunar Lander Lodge</a>
</li>
<li>
<a href="#" class="link link-sub">Tranquility Inn</a>
</li>
</ul>
</li>
<li class="item-top">
<a href="#" class="link link-top">Plan Your Trip</a>
<ul class="nav nav-sub">
<li>
<a href="#" class="link link-sub">Seasonal Rates</a>
</li>
<li>
<a href="#" class="link link-sub">Food and Restaurants</a>
</li>
<li>
<a href="#" class="link link-sub">Gravity Acclimation</a>
</li>
<li>
<a href="#" class="link link-sub">Recommended Duration</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
...
</main>
</body>
</html>
リスト要素には、スタイルの作成に使用するいくつかのクラスが含まれています。 これらの追加をindex.htmlに保存します。
次に、テキストエディタでstyles.cssを開きます。 このサイトヘッダーとナビゲーションは、 CSS Flexbox のいくつかのインスタンスを使用して、デフォルトで垂直に積み重ねられた要素の横並びのレイアウトを作成します。 次のコードブロックから強調表示されたCSSをstyles.cssファイルの下部に追加します。
...
header {
font: 1.125rem / 1.25 MuseoModerno, sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
color: white;
background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}
h1 {
margin: 0;
font-size: 1.75rem;
font-weight: 400;
}
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav-main {
display: flex;
align-items: stretch;
}
.item-top {
position: relative
}
このheaderセレクターは、<header>要素のすべてのテキストのフォント値を定義します。 次に、display、align-items、およびjustify-contentプロパティは、ヘッダーをflexでレイアウトし、コンテンツが互いに中央に配置されるように水平方向の行に配置します。 また、<h1>要素と<nav>要素がコンテナの反対側の端を占めるようにします。 h1セレクターはサイトのタイトルスタイルを定義し、.navクラスセレクターはデフォルトの順序付けされていないリストスタイルを削除します。 .nav-mainクラスは、トップレベルのナビゲーションアイテムを独自のflex行に配置します。 最後に、.item-topクラスセレクターは、トップレベルの<li>をposition: relativeコンテキストとして定義します。
styles.cssファイルを続行すると、次のスタイルセットはサブナビゲーションを非表示にし、リンクスタイルを作成します。
...
.nav-sub {
display: none;
}
.link {
color: inherit;
display: block;
text-decoration: none;
}
.link-top {
padding: 1.25rem 1.5rem;
}
.link-sub {
padding: 0.75rem 1.5rem;
}
.item-top:hover .link-top,
.item-top:focus .link-top,
.item-top:focus-within .link-top {
background-color: black;
}
.link-sub:hover,
.link-sub:focus {
background-color: hsl(210, 40%, 20%);
}
これらのルールの最初のタスクは、display: noneプロパティと値を使用してドロップダウンサブナビゲーションを非表示にすることです。これは、ドロップダウン部分をホバーするまで非表示にする必要があるためです。 次に、一連のクラスセレクターを作成して、表示されているトップレベルリンクと非表示のネストされたリンクのスタイルを適用します。 .linkクラスは、ナビゲーション内のすべてのリンクからデフォルトの<a>スタイルを削除します。 次に、.link-topおよび.link-subルールは、2つのレベルで各リンクに必要なpaddingを定義します。
次に、.item-top:hover .link-topを含むグループ化コンビネータは、親<li>要素がホバーされたとき、フォーカスがあるとき、またはフォーカスされた子孫があるときに、リンクに背景色を提供します。 カーソルまたはフォーカスがサブナビゲーション項目に移動した後、インタラクティブな状態スタイルが<a>に残るため、状態は<li>にあり、<a>にはありません。 最後に、.link-sub:hover, .link-sub:focusは、ホバーまたはフォーカスされたときのサブナビゲーションリンクのbackground-colorの変更を定義します。
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを開きます。 次の画像に示すように、ページの上部に濃い紫色のバーが表示され、左側に大きなサイトタイトル、右側に一連のナビゲーションアイテムが表示されます。
次に、テキストエディタでstyles.cssに戻り、サブナビゲーションドロップダウン効果のスタイルを作成します。
...
.link-sub:hover,
.link-sub:focus {
background-color: hsl(210, 40%, 20%);
}
.item-top:hover .nav-sub,
.item-top:focus .nav-sub,
.item-top:focus-within .nav-sub {
display: block;
position: absolute;
}
このコードでは、グループコンビネータセレクター.item-top:hover .nav-subを、:hoverの代わりに:focusと:focus-withの状態バリエーションとともにCSSに追加しています。 <li>要素にカーソルを合わせるかフォーカスがある場合、ネストされた<ul>はdisplayプロパティをnoneからblockに変更して作成する必要があります。見える。 さらに、フォーカスがトップレベルから移動しても、サブナビゲーションが消えないようにする必要があります。これは、:focus-withinが役立つ場所です。 次に、positionプロパティをabsoluteに設定しました。これには、より正確なポジショニング制御が必要になるためです。
次に、望ましい結果は、ドロップダウンを常に<header>要素の一番下から開始することであるため、topプロパティを100%に設定して追加する必要があります。さらにいくつかのルールに加えて：
...
.item-top:hover .nav-sub,
.item-top:focus .nav-sub,
.item-top:focus-within .nav-sub {
display: block;
position: absolute;
top: 100%;
right: 0;
width: 15rem;
background-color: black;
}
topプロパティを100%に設定すると、absolute要素が移動し、その上部がrelative祖先の下部から始まるようになります。 次に、トップレベルのナビゲーションが右端になるため、ドロップダウンの幅が水平方向の幅を乱さないように、rightプロパティを0に設定する必要があります。画面外に移動してページを表示します。 最後に、widthの値を15remに設定し、background-colorをblackに設定しました。
これらの変更をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 これで、カーソルを最上位の要素の上に置いてから、カーソルをサブナビゲーション項目に垂直に移動することで、ナビゲーションを操作できます。 さらに、キーボードのTABキーを使用すると、各トップレベルおよびサブレベルのナビゲーション項目を切り替えることができます。 次のアニメーションは、キーボードナビゲーションを使用して各ナビゲーションアイテムに焦点を合わせているときに、これがどのように表示されるかを示しています。
このセクション全体を通して、absoluteポジショニング値と2方向プロパティのパワーを使用して、ドロップダウンサブナビゲーションシステムを作成しました。 また、topプロパティの100%の値を使用して、サブナビゲーションをプッシュし、常にヘッダーバーの下に表示されるようにしました。 次のセクションでは、positionプロパティのfixed値を使用して、スクロール中にヘッダーバーがページの上部に固定されたままになるようにします。
fixed値の使用
positionプロパティのもう1つの一般的な使用法は、fixed値を実装して、スクロール位置に関係なく、要素をビューポート内にとどまらせることです。 この値は、ユーザーがページのどこにいても表示される必要があるアラートバナーなどの機能を作成するときによく使用されます。 このセクションでは、fixed値を使用して、ヘッダーを常にビューポートに保持します。 これにより、ユーザーエクスペリエンス全体でナビゲーションにすばやくアクセスできるようになります。
fixedの位置の値の使用を開始するには、テキストエディタでstyles.cssに戻ります。 header要素セレクターに移動し、セレクターブロックの上部で、fixed値を使用してpositionプロパティを追加します。 目標はヘッダーをページの上部に添付することであるため、次のコードブロックで強調表示されているように、topプロパティを0に設定します。
...
header {
position: fixed;
top: 0;
font: 1.125rem / 1.25 MuseoModerno, sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
color: white;
background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}
...
これらの追加をstlyes.cssに保存し、Webブラウザでindex.htmlを開きます。 ページのレンダリングが終了したら、ページを上下にスクロールして、ヘッダーがビューポートウィンドウの上部に固定されたままになる様子を示します。 次のアニメーションは、この効果がブラウザにどのように表示されるかを示しています。
position: fixedが追加されたヘッダーには、1つの問題があります。それは、ウィンドウの幅全体に及ばなくなったことです。 fixed値を使用することの副作用の1つは、要素が可能な限り凝縮されることです。 いくつかの解決策があります。そのうちの1つは、widthプロパティを100%に設定することです。 ただし、要素にpaddingとデフォルトのボックスモデルがある場合、これにより水平スクロールが発生する可能性があります。
代わりに、leftおよびrightプロパティを追加し、それぞれ0に設定します。
...
header {
position: fixed;
top: 0;
left: 0;
right: 0;
font: 1.125rem / 1.25 MuseoModerno, sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
color: white;
background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}
...
これにより、ビューポートの左端と右端に固定されるヘッダーが引き伸ばされます。
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新してください。 ヘッダーは再び端から端まで広がり、ページを下にスクロールしている間も表示されたままになります。 次のアニメーションに示すように、ユーザーがページをどれだけ下にスクロールしても、ドロップダウンナビゲーションは同じように機能し続けます。
これで、固定ヘッダーが効果的に作成され、ユーザーがページのどこにいてもナビゲーションにアクセスできるようになりました。 また、position: fixedをブラウザの両側に伸ばすには、追加のスタイルが必要であることも学びました。 前のセクションでは、z-indexプロパティを使用して、position要素が互いにどのようにオーバーラップするかを制御します。
z-indexを使用した要素のレイヤー
positionプロパティを操作する上で最も難しいのは、ページ上に複数のposition要素を配置し、それらが重なる順序を管理することです。 デフォルトでは、ブラウザは、遭遇した各position要素を、HTMLページの前にある要素の前に配置することにより、これらの要素を階層化します。 このセクションでは、z-indexプロパティを使用して、このデフォルトのレイヤーを変更します。 また、カスタムCSS変数を使用してレイヤーの順序を追跡します。
position: fixedヘッダーを使用してページを下にスクロールする場合、月の写真とヘッダーが一致するように十分に下にスクロールすると、大きな問題が発生します。 fixedヘッダーがrelative写真と重なることが予想されますが、実際の動作はその逆です。
写真がヘッダーと重なっている理由は、HTMLの順序によるものです。 relative、absolute、またはfixed値の各position要素は、z軸に沿って互いに前面に追加された一連の平面として設定されます。 。 position: fixedは視覚的にヘッダーを上部に保持するため、この問題の修正は、ナビゲーションをページの下部に移動することで達成できます。 ただし、z-indexプロパティは、この種の状況を制御するために存在します。 z-index値は、要素が占めるz軸スタックの順序を定義する整数値です。
relative、absolute、およびfixedに設定されたすべての要素には、デフォルトのz-index値0が与えられますが、同じ平面に沿った1つの要素で、スタックはマークアップの順序に基づいてレンダリングされます。 写真にz-index: 1、ヘッダーにz-index: 2などの小さなz-index値を使用すると、この問題は修正されますが、z-index値は整数でなければなりません。 、2つの間に別の要素を収める余地はありません。 スタイリングに柔軟性を追加する1つの方法は、100ベースのシステムを使用して、CSS変数を使用してz-index値をインクリメントすることです。
独自のz-indexシステムを作成するには、テキストエディタでstyles.cssを開きます。 次に、ファイルの先頭に:rootセレクターを作成します。これは、ページの最上位のHTML要素（最も一般的には<html>要素）にスタイルを適用する疑似クラスセレクターです。 内部で、CSS変数とも呼ばれる一連のCSSカスタムプロパティを作成します。
:root {
--z-1: 100;
--z-2: 200;
--z-3: 300;
--z-4: 400;
--z-5: 500;
--z-6: 600;
--z-7: 700;
--z-8: 800;
--z-9: 900;
}
...
このコードに示されているように、カスタムプロパティは、2つのハイフン記号で始まり、その後にカスタム名が続きます。 z-indexシステムの場合、zで始まり、別のハイフン、1から9の範囲の数字が続くシリーズを作成しました。 各カスタムプロパティの値については、対応する範囲の100の値に設定します（1の場合は100、2の場合は200など）。 この100ベースのインクリメントの目的は、システムの各レベル間に大量の可能なスペースを確保することです。 position要素が--z-3と--z-4の間を行き来する必要がある状況が発生した場合、その状況に対応するための99の可能な値があります。
次に、styles.cssファイルのfigure要素セレクターに移動します。 カスタムプロパティの値を使用するには、最初にz-indexプロパティを追加します。 次に、システムを実装するには、z-indexプロパティの値としてvar()を追加します。
...
figure {
margin: 2rem 0;
padding: 0;
position: relative;
z-index: var(--z-1);
}
...
CSSのvar()は、値がカスタムプロパティによって定義されることを宣言します。 var()の括弧内に、:rootルールセットの最初のプロパティ--z-1を追加しました。 これはz-indexシステムの最下層を定義し、視覚的な順序はまだ変更されていません。
次に、headerセレクターに移動し、同じ形式のz-indexプロパティを追加して、--z-9カスタムプロパティ値をロードします。
...
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-9);
font: 1.125rem / 1.25 MuseoModerno, sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
color: white;
background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}
...
--z-9はシステム内で最大の数値であるため、<header>要素は常に他のすべてのposition要素よりも上になります。 z-indexの値は、5つのposition要素のうち3つにのみ配置されることに注意してください。 これは、z-indexがpositionコンテキストごとにのみ必要になるためです。 figureとheaderは、ページの一番上のposition要素であり、本文は最初のpositionコンテキストです。 ネストされた残りのposition要素は、祖先とともに適切なz軸平面に移動します。
変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlをリロードします。 これで、ページをスクロールすると、月の写真とそのキャプションがヘッダーと開いているサブナビゲーションアイテムの下に移動します。 次のアニメーションは、新しい重複シナリオを示しています。
この最後のセクションでは、カスタムプロパティを使用して、z-indexシステムを作成し、どのposition要素がどの要素とオーバーラップするかをより適切に制御しました。 また、CSS変数メソッドを使用して、z-index値を100ずつインクリメントすることにより、多数のposition要素を持つプロジェクトに対応しました。
結論
positionプロパティは、独自のレイアウトと相互作用を作成するためのさまざまな方法を提供します。 このチュートリアルでは、relative、absolute、およびfixedのpositionプロパティ値を練習します。 それぞれがさまざまな方法でページおよび相互にどのように相互作用するかの例を試しました。 また、方向プロパティtop、right、bottom、およびleftを使用して、position要素の配置を微調整しました。ページと相互に関連しています。 最後に、z-indexプロパティを使用して、position要素のレイヤー順序を制御しました。 これらのツールは、モーダル、アラートバナー、スティッキー要素など、他のさまざまなソリューションを解決するためのフロントエンド開発の実践に役立ちます。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
