[SOLUCIONADO] z-index negativo desde dentro

[Germano6]

Tengo una capa con otra capa dentro y quiero que la de dentro aparezca por detrás de la de fuera. Le he puesto un z-index: -1 pero no funciona.

Código HTML:

<div class="fuera">
<div class="dentro">
</div>
</div>
 

Código CSS:

.fuera {
position: absolute;
height: 100px;
width:100px;
z-index: 10;
background: white;
}
.dentro {
position: fixed;
width: 100%;
height: 100%;
background: black;
}
 

[PHPeros]

Es normal que ocurra si los anidas

Código HTML:

<div class="fuera"></div>
<div class="dentro"></div>
 

Ahora si funciona

[Germano6]

Iniciado por PHPeros

Es normal que ocurra si los anidas

Código HTML:

<div class="fuera"></div>
<div class="dentro"></div>
 

Ahora si funciona

Claro jaja evidentemente, la cosa es que funcione estando anidados. Es lo que me interesa. Pero vamos, si no se puede, no se puede.

[AngelKrak]

eliminale el position: absolute; al <div class="fuera"> y agregale el z-index negativo al <div class="dentro">

HTML:

Código HTML:

<div class="fuera">
<div class="dentro">
</div>
</div>
 

CSS:

Código CSS:

.fuera {
  height: 100px;
  width: 100px;
  z-index: 10;
  background: #fff;
}
 
.dentro {
  z-index: -1;
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
}
 

DEMO:
http://codepen.io/AngelKrak/pen/mJXvmG

[Germano6]

Iniciado por AngelKrak

eliminale el position: absolute; al <div class="fuera"> y agregale el z-index negativo al <div class="dentro">

Pero no le puedo quitar el position absolute. Es importante. Lo podría sustituir por fixed en todo caso, pero no lo puedo suprimir.

[fede5426]

La pregunta es, para qué los necesitas anidados si después querés cambiar sus posiciones dejando al hijo como conteniendo a su padre? No tiene mucho sentido..

[pzin]

No puedes hacerlo estando uno dentro de otro. El valor de z-index se hereda de forma forzada.