html - relativo - posicionamiento css márgenes negativos de índice z
position css (3)
Es necesario especificar la position :
#connector{
position:relative;
height:200px;border:10px solid black;
background:blue;
margin-bottom: -100px;
z-index: 21;
}
Tengo el siguiente html: no importa lo que haga, parece que no puedo conseguir que la división central aparezca en la parte superior de la parte superior y también en la parte superior de la parte inferior. Se sienta bien por encima de la parte superior, pero donde esperaba que la parte inferior se sienta por debajo de la mitad, la parte inferior se sienta en la parte superior. Algunas ideas ? Jsfiddle enlace a continuación también .. gracias de antemano!
<body>
<div>
<div id="tdiv" >Top Div</div>
<div id="connector">Middle Didv</div>
<div id="bdiv">Bottom Div </div>
</div>
</body>
#tdiv{
height:200px; border:10px dotted black ;
margin-bottom: -100px;
background:red;
}
#connector{
height:200px;border:10px solid black;
background:blue;
margin-bottom: -100px;
z-index: 21;
}
#bdiv{
border:21px dashed black;
height:200px;
z-index: 1;
background:green;
}
Si quiere decir "arriba" ocultando el primero mientras ve el segundo, debe agregar "posición: absoluta". Si quiere decir por orden, puede usar las siguientes líneas:
var d = getElementById ("..."); var p = d.parentNode; p.removeChild (d);
y luego agregar al índice, o agregarlos todos nuevamente en el orden requerido.
z-index es inútil en un elemento posicionado estático. position:relative prueba position:relative . Si los márgenes negativos no funcionan para usted, use los valores top o bottom y negativos.