2010-11-11 12 views
15

Mam następujący kod HTML - bez względu na to, co robię, wydaje mi się, że środkowy element div nie pojawia się na górze i na dole. Siedzi w porządku nad górą, ale tam, gdzie spodziewałbym się, że dno usiądzie poniżej środka, faktycznie siedzi na górze. Jakieś pomysły ? Jsfiddle link poniżej również .. z góry dziękuję!Pozycjonowanie css marginesy ujemne z-index

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

+0

'z-index' nie działa, chyba że podano' position'. – Brad

Odpowiedz

36

z-index jest bezużyteczne statycznego umieszczonym elemencie. spróbuj position:relative. jeśli marginesy ujemne nie działają, użyj wartości top lub bottom i wartości ujemnych.

6

musisz określić position:

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

Jeśli masz na myśli „na wierzchu”, ukrywając się pierwszy widząc drugie, należy dodać „position: absolute” Jeśli masz na myśli postanowieniem, ty może używać następujących linii:

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

i dodać do indeksu lub dodać je wszystkie od nowa w wymaganej kolejności.