Css позиционирование отрицательных полей z-index

У меня есть следующий html - независимо от того, что я, по-моему, не могу заставить средний div появляться сверху, а также сверху. Он сидит отлично сверху, но где бы я ожидал, что дно будет сидеть ниже середины, внизу на самом деле сидит сверху. Есть идеи? Jsfiddle ссылка ниже также.. спасибо заранее!

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

Ответ 1

z-index бесполезен для статического позиционированного элемента. попробуйте position:relative. если отрицательные поля не работают для вас, используйте top или bottom и отрицательные значения.

Ответ 2

Вам нужно указать position:

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

Ответ 3

Если вы имеете в виду "сверху", сокрыв первый, увидев второе, вы должны добавить "position: absolute" Если вы имеете в виду по заказу, вы можете использовать следующие строки:

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

а затем добавить в индекс или добавить все из них заново в требуемом порядке.