css positionnement z-index marges négatives

J'ai le html suivant - peu importe ce que je fais, je ne peux pas sembler obtenir le div moyen d'apparaître sur le dessus et aussi sur le haut. Il se trouve bien au-dessus du sommet, mais où je m'attends à ce que le fond de s'asseoir au-dessous du milieu du fond se trouve effectivement sur le dessus. Des idées ? Jsfiddle lien ci-dessous aussi .. merci d'avance!css positionnement z-index marges négatives

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

Source

2010-11-11 wmitchell

'z-index' ne fonctionne pas sauf si' position' est spécifié. – Brad

z-index est inutile sur un élément positionné statique. essayez position:relative. Si les marges négatives ne fonctionnent pas pour vous, utilisez top ou bottom et les valeurs négatives.

Source

2010-11-11 17:01:54

Vous devez spécifier position:

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

Source

2010-11-11 17:03:56

Si vous voulez dire « au-dessus » en se cachant la première en voyant le second, vous devez ajouter « position: absolute » Si vous entendez par commande, vous pouvez utiliser les lignes suivantes:

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

et de les ajouter à l'index ou de les ajouter à nouveau dans l'ordre requis.

Source

2010-11-11 17:05:39

css positionnement z-index marges négatives

Répondre

Questions connexes