KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > Web・DTPデザイン > スタックコンテキストとスタックレベル

Web・DTPデザイン

スタックコンテキストとスタックレベル

KENスクールONLINE

CSSでpositionを使ってレイアウトをする際に、要素の重なり順を指定するz-indexプロパティを利用する機会があります。
その際にスタックコンテキストとスタックレベルをきちんと理解していないと、思ったように重なり順を変更できないトラブルにみまわれます。

今回は「スタックコンテキストとスタックレベル」について学習しましょう。

スタックコンテキストとはCSSでpositionをstatic以外に設定し、さらにz-indexの指定をした場合に生成される文脈のことです。 position指定とz-index指定したHTMLの要素にスタックコンテキストが生成され、その要素内の子孫要素はそのスタックコンテキスト内に所属しているということになります。

スタックコンテキスが生成された際に、その要素の重なり順を表しているのがスタックレベルです。こちらを指定するのがz-indexプロパティです。

z-indexの初期値は「auto」です。autoはスタックレベルとしてはz-index:0と同じ位置となります。しかし、z-index:0と指定した場合と、z-indexがautoのままでは結果が違ってきます。

サンプルを入力して確認しましょう。

 

ボックスAとボックスBは両方とも#wrapperの子要素です。こちらに下記のCSSを設定しました。

 

ではボックスAにz-index:-1;を設定してみます。

 

結果は最初となんら変わらないと思います。すべての要素にposition(static以外)とz-index(auto以外)が設定されているため、スタックコンテキストが生成されます。その結果、ボックスAとボックスBは #wrapperのスタックコンテキストに所属しているため、いくらz-indexを設定しても、親要素より裏側に配置することはできません。

今度は#wrapperのz-indexをコメントアウトして確認してみます。(ボックスAのz-index:-1)

 

ボックスAは親要素である#wrapperよりも裏側に配置できました。

これは、#wrapperにz-indexが設定されていないので、#wrapperにはスタックコンテキストは生成されていない結果です。z-indexは初期値のautoです。autoの位置はz-index:0と同じですが、スタックコンテキストがあるかないかで結果が変わってしまうという例です。

きちんと理解してpositionやz-indexを使ってください!

WEB初心者から最短3ヵ月でWEBデザイナーを目指す

コロナ禍でリモートワークが増え、在宅でできるWEBデザイナーの仕事に人気が集まっています。

そこでKENスクールではニーズの高いオンライン完結のWEBデザインスクールを開校しました。WEBデザイナーになるために必要なカリキュラムを揃え、資格系を除いたすべてのカリキュラムを、通学と同じクオリティで提供致します。

完全マンツーマン授業で毎回先生が変わらないので、生徒の悩み、得手不得手などにいち早く気づき、生徒一人ひとりに合わせた指導をする事が可能です。

最短3ヵ月でWEBデザイナーを目指せる実践レベルで学ぶためのカリキュラムで、就転職のサポートまで付いたコースをご用意しています。

無料カウンセリングも実施していますので、ご興味のある方はこちらよりお問い合わせください。

この記事に関連する講座

HTML5とCSS3の基本コーディングが身につく!

詳しくはこちら