css – Absolute Positioned Div隐藏了我的其他div

2023年10月10日 197次阅读

看看,
http://thomaspalumbo.com

我的网站容器有这个CSS：

.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}

然后我在它上面放了一个容器来集中信息.
.graybox容器像我想要的那样传播页面的宽度,但现在我的页脚div被隐藏了,根据firebug它实际上是在后面？在页面上？

有没有解决这个问题？

虽然我在这里可以解释页面右侧的空白区域.一旦页面调整得更小,它就会生效.

最佳答案 您可以使用CSS z-index属性来确保您的页脚位于内容的前面. Z-index仅在元素定位时有效.因此,请确保添加位置：相对于您的页脚

#footer{
    position:relative;
    z-index:999;
}

阅读更多：http://www.w3schools.com/cssref/pr_pos_z-index.asp

编辑

只是检查了你的网站的代码,我不明白为什么你的灰盒子绝对定位,这只会使事情变得更复杂.您的菜单也是如此,为什么要将它置于绝对位置,为什么不首先在HTML中以正确的顺序添加它？

编辑

如果您想要将内容居中,但背景宽度为100％,那么您只需添加容器div,如下所示：

HTML

<div class="container">
    <div>lorem ipsum....</div>
</div>

CSS

.container{
    background:red;
}

.container div{
    width:400px;
    margin:0 auto;
    background:yellow;
}

请参见JSFiddle：http://jsfiddle.net/HxBnF/

目前你不能这样做,因为你有一个容器,你设置为980px,除非你确定你不想要任何东西包裹它,否则不要这样做,就像在这种情况下容器中div的背景.

点赞