css定位z-索引负边距 [英] css positioning z-index negative margins

查看:113
本文介绍了css定位z-索引负边距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下html - 无论我怎么样,我似乎不能得到中间的div出现在顶部和顶部的底部。它坐在上面的顶部,但在那里我会期待底部坐在中间,底部实际上坐在上面。有任何想法吗 ?下面的Jsfiddle链接...预先感谢!

I have the following html - no matter what i do I cant seem to get the middle div to appear on top of the top and also on top of the bottom. It sits fine above the top but where i'd be expecting the bottom to sit below the middle the bottom actually sits on top. Any ideas ? Jsfiddle link below also .. thanks in advance !

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

推荐答案

z-index 在静态定位元素上是无用的。尝试 position:relative 。如果负边距无法解决,请使用 top 底部和负值。

z-index is useless on a static positioned element. try position:relative. if negative margins don't work out for you, use top or bottom and negative values.

这篇关于css定位z-索引负边距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆