html - serve - z-index position absolute

El índice z de CSS no funciona(posición absoluta)

Question

Estoy tratando de hacer el div negro (relativo) por encima del segundo amarillo (absoluto). El padre del div negro tiene una posición absoluta también.

Código:

#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>

Resultado Esperado:

Answer 1

¿Qué tal esto?

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;
}

use la división relativa como envoltura y deje que las divinas amarillas tengan una posición normal.

Solo el bloque negro necesita tener una posición absoluta entonces.

Answer 2

Estaba luchando con este problema y aprendí (gracias a this post) que:

La opacidad también puede afectar el índice z

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>

Answer 3

Estaba luchando para descubrir cómo poner un div sobre una imagen como esta:

No importa cómo configuré el índice z en ambos divs (la envoltura de la imagen) y en la sección que obtuve:

Resulta que no había configurado el fondo de la sección como background: white;

así que básicamente es así:

<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 */
}

Answer 4

Esto se debe al contexto de apilamiento , al establecer un índice z también se aplicará a todos los hijos.

Podrías hacer los dos hermanos de <div> lugar de descendientes.

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

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

Answer 5

Resolví mi problema de z-index haciendo que la envoltura del cuerpo z-index:-1 y el z-index:-2 , y los otros divs z-index:1 .

Y luego los divs posteriores no funcionaron a menos que tuviera z-index 200+. Aunque tenía una position:relative en cada elemento, con el cuerpo en el z-index predeterminado no funcionaría.

Espero que esto ayude a alguien.

Answer 6

Solo agregue el segundo .absolute div antes del otro .second div:

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

Porque los dos elementos tienen un índice 0.

Answer 7

prueba este código:

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

}

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

Answer 8

retirar

z-index:0;

de .absolute .

Actualizó el violín aquí.

Answer 9

JSFiddle

Debes colocar el segundo div encima del primero porque ambos tienen un índice z de cero, de modo que el orden en el dom decidirá cuál está arriba. Esto también afecta al div posicionado relativo porque su índice z se relaciona con elementos dentro del div principal.

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

Css se mantiene igual.