css positionnement marges négatives z-index

J'ai le code html suivant - peu importe ce que je fais je ne peux pas sembler obtenir le milieu div à apparaître sur le dessus de la partie supérieure et aussi sur le fond. Il se trouve fine ci-dessus le sommet, mais où je serais attend le bas pour s'asseoir au-dessous du milieu du bas est assise sur le dessus. Des idées ? Jsfiddle lien ci-dessous .. merci d'avance !

    <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 d'informationauteur wmitchell

  1. 39

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

  2. 7

    Vous devez spécifier position:

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

    Si tu veux dire "en haut" en cachant la première et de voir la seconde, vous devez ajouter "position:absolute"
    Si vous voulez dire par ordre, vous pouvez utiliser les lignes suivantes:

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

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