-1

私は基本的なページをレイアウトしようとしていますが、私の 2 番目の div は、最終的に 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>

edit:: http://jsfiddle.net/EnGKs/ js fiddle<-- セカンダリ div が一番上の div の下にあることがわかるように、一番上の div をクリアして div 全体を表示できるようにする必要があります

4

1 に答える 1

3

を削除postition:absoluteします。これにより、要素がフローから削除され、オーバーラップが発生します。

.floater{
    position:absolute;
}

動作中の jsFiddle デモ

スライダーの絶対配置が必要な場合は、代わりにスライダー内の子に適用します。

于 2013-10-04T17:28:27.017 に答える