89

ネストされた 2 つの CSS 要素があります。親を子要素の上、つまり z 軸の上に配置する必要があります。z-index を設定するだけでは不十分です。

子に負の z-index を設定することはできません。これにより、実際のページのページ コンテナーの下に設定されます。これが唯一の方法ですか？

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}
<div class="wrapper">
  <div class="parent">
    parent parent
    <div class="child">
      child child child
    </div>
  </div>
</div>

4

7 に答える 7

81

子にマイナスz-indexを設定し、親に設定されているものを削除します。

.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}
<div class="wrapper">
    <div class="parent">parent 1 parent 1
        <div class="child">child child child</div>
    </div>
    <div class="parent2">parent 2 parent 2
    </div>
</div>

https://jsfiddle.net/uov5h84f/

于 2009-11-27T01:57:50.413 に答える
60

幸いなことに、解決策が存在します。親のラッパーを追加し、このラッパーの z-index をたとえば 10 に変更し、子の z-index を -1 に設定する必要があります。

.parent {
    position: relative;
    width: 750px;
    height: 7150px;
    background: red;
    border: solid 1px #000;
    z-index: initial;
}

.child {
    position: relative;
    background-color: blue;
    z-index: -1;
    color: white;
}

.wrapper {
    position: relative;
    background: green;
    z-index: 10;
}
<div class="wrapper">
    <div class="parent">parent parent
        <div class="child">child child child</div>
    </div>
</div>

于 2012-04-14T18:39:46.530 に答える
9

これらの答えのいくつかはうまくいきますが、必要な効果を達成するためだけに設定してかなり強力に見えましたposition: absolute;. z-index: 10;残念ながら、これ以上減らすことはできませんでしたが、必要なのは次のことだけでした。

HTML:

<div class="wrapper">
    <div class="parent">
        <div class="child">
            ...
        </div>
    </div>
</div>

CSS:

.wrapper {
    position: relative;
    z-index: 0;
}

.child {
    position: relative;
    z-index: -1;
}

この手法を使用して、画像リンクの境界付きホバー効果を実現しました。ここにはもう少しコードがありますが、上記の概念を使用して、画像の上に境界線を表示します。

http://jsfiddle.net/g7nP5/

于 2014-05-15T12:20:33.540 に答える
3

それを割った。基本的に、z-indexを負に設定すると、実際には親要素が配置されているかどうかにかかわらず無視され、次に配置されている要素(この場合はメインコンテナ)の後ろに配置されます。したがって、親要素を別の配置された div に配置する必要があり、子 div はその後ろに配置されます。

私のコードが機能するために、親要素を具体的に配置することができなかったので、それを解決することは私にとって命の恩人でした。

ここで指示されている効果を達成するために、これらすべてが非常に便利であることがわかりました: CSSのみを使用して、ホバーオーバー時にdivを表示

于 2012-08-26T01:48:14.510 に答える
3

を使用するには、親と子の両方でposition:relativeorを使用する必要があります。position:absolutez-index

于 2009-11-27T18:37:39.883 に答える
3

あなたの div はであるためposition:absolute、位置に関する限り、それらは実際にはネストされていません。あなたの jsbin ページで、HTML の div の順序を次のように切り替えました。

<div class="child"><div class="parent"></div></div>

赤いボックスが青いボックスを覆っていました。これがあなたが探しているものだと思います。

于 2009-11-29T05:04:43.287 に答える
-13

スタイル：

.parent{
  overflow:hidden;
  width:100px;
}

.child{
  width:200px;
}

体：

<div class="parent">
   <div class="child"></div>
</div>
于 2011-10-02T16:35:34.137 に答える