logo标签列表

CSS定位z-index负边距

htmlcssz-indexmargin
24

我有以下HTML代码 - 无论我怎么做，似乎都不能让中间的

显示在顶部以及底部之上。它可以正常显示在顶部上方，但是当我期望底部出现在中间下方时，底部实际上却显示在中间上方。有什么想法吗？下面是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
只有在指定 position 属性时，z-index 才能生效。 - Brad
3个回答
47

z-index在静态定位元素上没有用处。尝试使用position:relative。如果负边距对您不起作用，请使用top或bottom和负值。

8
您需要指定position：
#connector{
    position:relative;
    height:200px;border:10px solid black;
    background:blue;
    margin-bottom: -100px;   
    z-index: 21;
}
0
如果您的意思是通过隐藏第一个并查看第二个来表示“在顶部”，则应添加“position:absolute”。 如果您的意思是按顺序排列，可以使用以下行：
var d = getElementById("..."); var p = d.parentNode; p.removeChild(d);
然后按索引添加，或按所需顺序全部添加。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接