我试图有一个基本的页面布局,但是我的第二个div是在neath下隐藏它最终将成为一个jQuery滑块。有人可以帮我弄清楚为什么它没有做它需要的东西。
继承我的Css ::
body{
background-image:url('background-body.png');
background-repeat:repeat;
}
#mainWrap{
clear:both;
top:20%;
width:600px;
height:500px;
background-color:#c0c0c0;
margin-left:auto;
margin-right:auto;
position:relative;
box-shadow:10px 10px 10px #000000;
}
.floater{
position:absolute;
margin-bottom:25px;
width:100%;
height:300px;
top:0;
z-index:1;
border:solid 1px;
background-color:white;
box-shadow:0 10px 10px #000000;
display:block;
clear:both;
}
#footer{
bottom:0;
position absolute;
width: 100%;
border:dashed 1px;
height: 60px;
background-color:white;
}
</style>
到目前为止我的基本HTML。
</div>
<div id="nav">
</div>
<div id="mainWrap">
</div>
<div id="footer">
</div>
编辑:: http://jsfiddle.net/EnGKs/ js fiddle&lt; - 你可以看到辅助div位于顶部div之下,我需要它清除顶部div以便整个div可见
答案 0 :(得分:3)
删除postition:absolute
,因为这会从流中删除元素,从而导致它重叠。
.floater{
position:absolute;
}
如果您需要滑块的绝对定位,请将其应用于其中的子项。