Question

我正在尝试制作以下html / css布局：

http://siteique.com/uploads/1.png http://siteique.com/uploads/1.png。

我的问题是主div后面的蓝线。

<div id="container">
    <!-- blue line 1 -->
    <div style="width:100%; height:60px; background-color:#81b7ff; position:absolute; top:385px; z-index:1; float:left;"></div>

    <div id="site">
    </div>

    <div id="footer">
        <!-- blue line 2 -->
        <div style="position:relative; bottom:0px; height:200px; width:100%; z-index:1;"></div>
    </div>
</div>

问题在于，如果我制作#site div position:absolute和z-index:2 #footer赢得了我想要的位置。

那么我需要的技巧是什么？

我正在尝试将蓝色div置于白色div #site

后面

Answer 1

问题在于，如果我制作#site position:absolute和 z-index:2 ...

如果您只想通过添加新图层来影响堆叠上下文，position: relative;将是合适的并保持元素流动。

另请注意，“蓝线2”具有不同的堆叠上下文，然后是“蓝线1”，因为前者嵌套在另一层（#footer）中，然后是后者。

另见：

元素后面的css定位（z-index）元素

1 个答案: