代码之家 › 专栏 › 技术社区 › wmitchell

css定位z-索引负边距

margin z-index css html

wmitchell · 技术社区 · 14 年前

我有以下的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 回复 | 直到 14 年前

meder omuraliev 14 年前

z-index 对静态定位元素无效。尝试 position:relative . 如果负边距对您不起作用,请使用 top 或 bottom

webSol webSol 14 年前

您需要指定 position :

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

Mor Shemesh 14 年前

如果您指的是订单,您可以使用以下行:

变量d=getElementById(“…”); 变量p=d.parentNode;

然后添加到索引,或者按照所需的顺序重新添加所有索引。

推荐文章

Vithis · WPF更改边距会向下推其他元素

7 年前

RejectEd27 · 无法从方框中删除边距

7 年前

altos · 菜单切换添加间距(边距)(如果单击)

7 年前

Iucounu · 响应CSS容器仅在平板电脑大小时失去利润

7 年前

A. Schmidt · XAML:ListViewItem中的StackPanel/GridView不占用ListViewItem的整个空间

7 年前

Shankar Naik · 为什么视图的边距必须为-20才能接近屏幕的末尾,为什么不为零?

7 年前

yoan26 · 根据子大小+边距展开父div

7 年前

Alexander Prisazhny · jQuery问题:body overflow vs body margin

7 年前

Taylor Barton · iFrame标记上的边距

7 年前

De Papier · 上/下页边距百分比在firefox中不起作用[重复]

7 年前