css posizionando i margini negativi di z-index

Ho il seguente codice HTML: non importa quello che faccio, non riesco a far apparire il middle div in cima alla parte superiore e anche in cima alla parte inferiore. Si trova bene sopra la parte superiore, ma dove mi aspetto che il fondo siederà al di sotto del centro, il fondo si trova in cima. Qualche idea ? Collegamento Jsfiddle anche qui .. grazie in anticipo!

 
Top Div
Middle Didv
Bottom Div
#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/

z-index è inutile su un elemento posizionato statico. prova la position:relative . se i margini negativi non funzionano per te, utilizza i valori top o bottom e negativo.

Devi specificare la position :

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

Se intendi “in cima” nascondendo il primo mentre vedi il secondo, dovresti aggiungere “position: absolute” Se intendi per ordine, puoi usare le seguenti linee:

var d = getElementById (“…”); var p = d.parentNode; p.removeChild (d);

e poi aggiungere all’indice, o aggiungerli tutti di nuovo nell’ordine richiesto.