web-dev-qa-db-ja.com

親要素を子の上に表示する方法

ネストされたCSS要素が2つあります。親を子要素の最上部、つまり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>
cssz-index
76
Jourkey

子に負の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/

71
Alan Haggai Alavi

幸いなことに解決策があります。親のラッパーを追加し、このラッパーの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>
50
zielu1

これらの回答の一部は機能しますが、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/

7
TheShrew

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

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

ここで説明されている効果を達成するには、これらすべてが非常に有用であることがわかりました： CSSのみを使用して、<a> の上にカーソルを置いてdivを表示します

3
Edd Tillen

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

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

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

3
carillonator

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

2
Divya Manian