css позиционирование z-index отрицательные поля - PullRequest
Новая
       20

css позиционирование z-index отрицательные поля

19 голосов
/ 11 ноября 2010

У меня есть следующий 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/

Ответы [ 3 ]

42 голосов
/ 11 ноября 2010

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

7 голосов
/ 11 ноября 2010

Вам необходимо указать position: 

#connector{
    position:relative;
    height:200px;border:10px solid black;
    background:blue;
    margin-bottom: -100px;   
    z-index: 21;
}
0 голосов
/ 11 ноября 2010

Если вы имеете в виду «сверху», скрывая первое, когда видите второе, вы должны добавить «position: absolute». Если вы подразумеваете под заказ, вы можете использовать следующие строки:getElementById ( "...");var p = d.parentNode;p.removeChild (d);

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

...