web-dev-qa-db-ja.com

CSS z-indexが機能しない（絶対位置）

黒のdiv（相対）を2番目の黄色のdiv（絶対）の上に作成しようとしています。黒のdivの親にも絶対位置があります。

コード：

#relative {
        position: relative;
        width: 40px;
        height: 100px;
        background: #000;
        z-index: 1;
        margin-top: 30px;
}
.absolute {
        position: absolute;
        top: 0; left: 0;
        width: 200px;
        height: 50px;
        background: yellow;
        z-index: 0;
}
<div class="absolute">
    <div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>

期待される結果：

enter image description here

htmlcsscss-positionrelativeabsolute
56
HTMHell

削除する

z-index:0;

.absoluteから。

ここでフィドルを更新しました。

41
Hiral

これは、 Stacking Context のためです。z-indexを設定すると、すべての子にも適用されます。

子孫ではなく、2つの<div>s兄弟を作成できます。

<div class="absolute"></div>
<div id="relative"></div>

http://jsfiddle.net/P7c9q/3/

30
xec

私はこの問題に苦労していましたが、次のことを学びました（ this postのおかげです）：

不透明度もz-indexに影響する可能性があります

div:first-child {
  opacity: .99; 
}

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}

.green {
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}
<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>
8
Mohamed Ramrami

次のような画像にdivを配置する方法を見つけるのに苦労しました： z-index working

両方のdiv（イメージラッパー）とこれを取得していたセクションでz-indexをどのように構成したかに関係なく：

z-index Not working

セクションの背景をbackground: white;に設定していないことがわかりました

基本的には次のようになります：

<div class="img-wrp">
  <img src="myimage.svg"/>
</div>
<section>
 <other content>
</section>

section{
  position: relative;
  background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */
}
.img-wrp{
  position: absolute;
  z-index: -1; /* also worked with 0 but just to be sure */
}
2
juliangonzalez

2番目の.absolute divを他の.second divの前に追加するだけです。

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

2つの要素のインデックスは0であるためです。

1
edonbajrami

これはどう？

http://jsfiddle.net/P7c9q/4/

<div class="relative">
  <div class="yellow-div"></div>
  <div class="yellow-div"></div>
  <div class="absolute"></div>
</div>

.relative{
position:relative;
}

.absolute {
position:absolute;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
top:30px;
left:0px;
}
.yellow-div {
position:relative;
width: 200px;
height: 50px;
background: yellow;
margin-bottom:4px;
z-index:0;
}

相対divをラッパーとして使用し、黄色のdivに通常の位置を設定します。

その場合、黒のブロックのみに絶対位置が必要です。

0
Rasmus Stougaard

ボディラッパーz-indexとボディz-index:-1、およびその他のdivs z-index:-2を作成して、z-index:1の問題を解決しました。

そして、z-index 200+がなければ、後のdivは機能しませんでした。各要素にposition:relativeがありますが、本文がデフォルトのz-indexで機能しません。

これが誰かを助けることを願っています。

0
ax.falcon

このコードを試してください：

.absolute {
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 50px;
    background: yellow;

}

http://jsfiddle.net/manojmcet/ks7ds/

0
Manoj

JSFiddle

両方のZインデックスが0であるため、2番目のdivを最初のdivの上に配置する必要があります。これにより、domの順序によってどちらが一番上になるかが決まります。これは、Zインデックスが親div内の要素に関連するため、相対的な位置にあるdivにも影響します。

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

Cssは変わりません。

0
Markus Kottländer