代码之家 › 专栏 › 技术社区 › 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;

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

推荐文章

Kyle Lemon · 突出显示页脚背景和内容之间的跨距

7 年前

Valentyn Stets · Webpack 2 css加载程序在生产构建中替换z-index属性

7 年前

Nick · 浮动操作按钮z索引更改延迟

7 年前

Vandan Shah · 粘性表格标题结构中的不透明度问题

7 年前

norixxx · 当父内容将图像作为子内容,并且其他元素具有不透明度时,CSS堆栈顺序会发生变化

7 年前

assoonaspossible · 具有固定父元素的绝对定位元素上的z索引[重复]

7 年前

Ismail Rubad · z索引为1的元素位于祖父母的div下

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Tog Porter · 如何让图像滚动到导航栏后面

7 年前

Jasminder Pal Singh · 复杂的Z指数叠加问题

7 年前