css posicionamiento de los márgenes negativos del índice Z

Tengo el siguiente html: no importa lo que haga, parece que no puedo conseguir que aparezca el div en la parte superior y también en la parte superior. Se sienta bien encima de la parte superior, pero donde esperaba que la parte inferior se siente por debajo del medio, la parte inferior se sienta en la parte superior. Algunas ideas ? Jsfiddle enlace a continuación también ... gracias de antemano!css posicionamiento de los márgenes negativos del índice Z

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

http://jsfiddle.net/EWkMA/29/

Fuente

2010-11-11 wmitchell

'z-index' no funciona a menos que se especifique' position'. – Brad

z-index es inútil en un elemento posicionado estática. intente position:relative. si los márgenes negativos no funcionan para usted, use top o bottom y valores negativos.

Fuente

2010-11-11 17:01:54

es necesario especificar position:

#connector{ 
    position:relative; 
    height:200px;border:10px solid black; 
    background:blue; 
    margin-bottom: -100px; 
    z-index: 21; 
}

Fuente

2010-11-11 17:03:56

Si se refiere a "por encima" ocultando la primera de ellas, mientras que ver la segunda, se debe añadir "position: absolute" Si quieres decir por pedido, puede usar las siguientes líneas:

var d = getElementById ("..."); var p = d.parentNode; p.removeChild (d);

y luego añádalos al índice, o agréguelos nuevamente en el orden requerido.

Fuente

2010-11-11 17:05:39

css posicionamiento de los márgenes negativos del índice Z

Respuesta

Cuestiones relacionadas