it-swarm.com.ru

CSS z-index не работает (абсолютная позиция)

Я пытаюсь сделать черный 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

47
HtmHell

Удалить

z-index:0;

из .absolute.

Обновлена ​​скрипка здесь.

35
Hiral

Это происходит из-за стекового контекста , установка z-индекса сделает его применимым также ко всем дочерним элементам.

Вы можете сделать двух братьев и сестер <div> вместо потомков.

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

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

27
xec

Я боролся с этой проблемой, и я узнал (благодаря этот 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>

6
Mohamed Ramrami

Я изо всех сил пытался понять, как поместить div на изображение, подобное этому:  z-index working

Независимо от того, как я настроил z-index в обоих div (обертке изображения) и в разделе, который я получил, это:

 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

Просто добавьте второй .absolute div перед другим .second div:

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

Потому что два элемента имеют индекс 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 и тело z-index:-2, а другие div-ы z-index:1

А потом более поздние div не работали, если у меня не было z-index 200+. Несмотря на то, что у меня был 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

Вы должны поместить второй div поверх первого, потому что оба имеют z-index, равный нулю, чтобы порядок в dom решал, который находится сверху. Это также влияет на относительное расположение div, потому что его z-индекс относится к элементам внутри родительского div.

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

Css остается прежним.

0
Markus Kottländer