[CS]z-indexとスタックコンテキスト

23209 ワード

CSS テキストリンク

Goal

z-indexの使用方法について説明します.

スタックコンテキストについて説明します.

z-indexの使用

要素の積み重ね順を変えるには,2つの条件が必要である.

POSIItonプロパティを設定します.

z-indexプロパティを設定します.

ここで、z-indexプロパティは、シンボルのz軸上の位置を表す整数値を有する.
次の例では、位置属性が適用されないエンティティが기본 렌더링 레이어 (Layoer 0)にあるのではなく、位置属性が指定されたエンティティ間でz−indexによってスタック順序が決定されることが分かる.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="container">
      <div>
        <p>div 1. position:absolute</p>
        <p>z-index:5</p>
      </div>
      <div>
        <p>div 2. position:relative</p>
        <p>z-index:2</p>
      </div>
      <div>
        <p>div 3. not positioned</p>
        <p>z-index:8</p>
      </div>
      <div>
        <p>div 3. position:absolute</p>
        <p>z-index:-1</p>
      </div>
    </main>
  </body>
</html>

main {
  position: relative;
  width: 500px;
  height: 500px;
  text-align: right;
}

div {
  padding: 5px;
  margin: 5px;
}

div:nth-child(1) {
  position: absolute;
  width: 150px;
  height: 500px;
  left: 40px;
  background-color: rgba(255, 204, 204);
  z-index: 5;
}

div:nth-child(2) {
  position: relative;
  width: 500px;
  height: 150px;
  background-color: rgba(255, 255, 0);
  z-index: 2;
}

div:nth-child(3) {
  width: 500px;
  height: 150px;
  background-color: rgba(0, 255, 0);
  z-index: 8;
}

div:nth-child(4) {
  position: absolute;
  width: 150px;
  height: 500px;
  top: 0;
  left: 250px;
  background-color: red;
  z-index: -1;
}

z-indexなし

모든 엘리먼트에 z-index 설정이 없을 경우、または여러 엘리먼트들이 같은 z-index를 가질 경우、装飾は以下の順序で下から上へ積み上げられる.
同じ順序であれば、HTMLソースに書き込まれた順序で順序を決めます.

線分背景、枠線

位置属性およびフローティング属性が設定ブロックレベル要素

位置属性が設定されていないフローティング属性を有するフローティング要素

position属性が設定されていないインラインエンティティ

の位置属性が設定されたエンティティ

次の例では、z-indexプロパティが指定されていない場合、スタック脈絡を決定する方法について説明します.
まず、最初のdivはposition属性が指定されていないblock levelセグメントであり、2番目と3番目のdivはposition属性が相対的に指定されている.
上記の手順から元素の堆積がわかります.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      div 1 . not positioned
    </div>
    <div>
      div 2 . relative positioned
    </div>
    <div>
      div 3 . relative positioned
    </div>
  </body>
</html>

div {
  border: 1px solid black;
}

div:nth-child(1) {
  width: 400px;
  height: 400px;
  background-color: rgba(255, 204, 204);
}

div:nth-child(2) {
  position: relative;
  width: 250px;
  height: 250px;
  top: -300px;
  left: 50px;
  background-color: rgba(255, 255, 0);
}

div:nth-child(3) {
  position: relative;
  width: 150px;
  height: 150px;
  top: -500px;
  left: 70px;
  background-color: rgba(0, 255, 0);
}