Bootstrapでz-indexの指定

Question

<nav class="navbar navbar-expand-lg navbar-light bg-light  custom-vh-top2">
      <button type="button" class="navbar-toggler mx-auto" data-toggle="collapse"  data-target="#aaa" name="button">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse mt-5" id="aaa">
        <div class="container custom-vh-top2">
          <div class="row">
            <div class="col-12 col-lg-3 cus-index20">
              <button type="button" class="cus-btn w-75 "  name="button" onclick="location.href='#about'">ABOUT</button>
            </div>
          </div>
        </div>
      </div>
    </nav>

@charset "utf-8";

.cus-btn{
  border: 3px solid #3498db;
  background:none;
  border-radius:10px;
  padding:10px 20px;
  font-size:30px;
  font-family:"montserrat";
  cursor:pointer;
  transition:.8s;
  position:relative;
  overflow:hidden;
  color:#3498db;
}

.cus-btn:hover{
  color:#fff ;
}

.cus-btn::before{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:0%;
  background:#3498db;
  z-index:-1;
  transition:.8s;
  top:0;
  border-radius:0 0 50% 50%;
}

.cus-btn:hover::before{
  height:200%;
}

.cus-index20{
  z-index:20;
}

navbar内で、ホバーすると動きが出るボタンを作りました。
このときのCSSにおける
.cus-index20{
z-index:20;
}
と
z-index:-1;
の関係がわかりません。
colに指定されているposition:relative;とz:index:20の組み合わせると、
子要素でのz-index：-1は効かないと理解しています。

それなれなのにz-index:-1が必要な理由がよくわかりません。

また、cus-index20はcolのところに書かないとならず、rowやcontainerのところに書くとうまく動きが出ないこともわかりません。

わかるかたよろしくお願いします。

Comments

[s8_chu]

個人的には、 CSS タグも付与されているほうがより適切に感じるので、もしよろしければ対応をよろしくお願いします。

Answer 1

前提

今回の回答では、以下のコードを用います。これは今回生じている問題に関係のない部分を省いたコードです。このコードでは、 .z-index20 クラスを div.col-12 要素の祖先へ適用すると、ボタンのホバー時のアニメーションが正常に動作しないようになっています (動作確認用リンク)。

<div class="container bg-dark">
  <div class="row">
    <div class="col-12 z-index20">
      <button type="button" class="btn">ABOUT</button>
    </div>
  </div>
</div>

*,
::after,
::before {
  box-sizing: border-box;
}

button,
html [type="button"] {
  -webkit-appearance: button;
}

body {
  margin: 0;
}

.bg-dark {
  background-color: #343a40;
}

.container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.btn {
  border: 3px solid #3498db;
  background: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 30px;
  font-family: "montserrat";
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: #3498db;
}

.btn:hover {
  color: #fff;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #3498db;
  z-index: -1;
}

.btn:hover::before {
  height: 200%;
}

.z-index20 {
  z-index: 20;
}

回答

colに指定されているposition:relative;とz:index:20の組み合わせると、
子要素でのz-index：-1は効かないと理解しています。

それなれなのにz-index:-1が必要な理由がよくわかりません。

いいえ、「子要素での z-index プロパティ」は祖先要素で生成されたスタックコンテキストにおいて効果があります。z-index: -1 は祖先要素におけるスタックコンテキストでの描画順序を変更しています。

---

また、cus-index20はcolのところに書かないとならず、rowやcontainerのところに書くとうまく動きが出ないこともわかりません。

この挙動は、 z-index プロパティやスタックコンテキストの効果について理解しておくと理解がしやすくなります。以下でこれら二つについて説明します。

z-index プロパティとは

z-index プロパティに整数値を指定することで、スタックコンテキストにおける要素の描画順序 (重なる順序) を指定することが出来ます。また、 z-index プロパティに整数値を指定すると、その要素がスタックコンテキストを確立します。ここで、 z-index プロパティは位置指定された要素を適用対象の要素としています。そのため、 position プロパティの値が static の要素では z-index プロパティの値は auto となります。

9.9.1 Specifying the stack level: the 'z-index' property

スタックコンテキストとは

スタックコンテキストは、 z-index プロパティによる描画順序の影響が及ぶ範囲を示した概念です。スタックコンテキスト内での z-index プロパティの描画順序は、その他のスタックコンテキストに影響を及ぼしません。スタックコンテキストは主に、特定の CSS プロパティが指定されている場合に生成されますが、ルート要素は常にスタックコンテキストを生成します。

9.9.1 Specifying the stack level: the 'z-index' property

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' [CSS3COLOR].

ここで、今回問題となっている挙動を理解するにあたって必要となるスタックコンテキストの生成条件を挙げておきます。

• ルート要素は常にスタックコンテキストを生成する。
• z-index プロパティの値が auto 以外の位置指定要素はスタックコンテキストを生成する。
• z-index プロパティの値が auto 以外のとき、 flex アイテムはスタックコンテキストを生成する。

  § 4.3. Flex Item Z-Ordering

  Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative).

---

以上を踏まえたうえで、改めて回答文の冒頭に載せたコードをみます (動作確認用リンク)。 div.col-12 要素に .z-index20 クラスが指定されているとき、生成されているスタックコンテキストは、

• ルート要素
• div.col-12 要素
• button.btn::before 擬似要素

の三つです。そして、 button.btn::before 擬似要素は、 div.col-12 要素のスタックコンテキストに所属しており、 z-index プロパティの値は -1 であるため、 div.container.bg-dark 要素よりも上で、 button.btn 要素よりも下の位置に配置されます。

次に、 div.col-12 要素の祖先要素 (今回は .row 要素とする) へ .z-index20 クラスが指定されたときを考えてみます (動作確認用リンク)。このとき生成されているスタックコンテキストは、

• ルート要素
• button.btn::before 擬似要素

の二つになります。すると、 button.btn::before 擬似要素はルート要素のスタックコンテキストに所属します。これにより、 button.btn::before 擬似要素はルート要素より上で、 div.container.bg-dark 要素や body 要素よりも下の位置に配置されます。そうすると、 button.btn::before 擬似要素は隠れ、ホバー時に button 要素の文字色のみが変化しているように見えます。これが .cus-index20 クラスを移動させたときの挙動の変化の原因です。この動作は、適切な位置でスタックコンテキストを生成することで解決することが出来ます (動作例)。