0

私はヘッダーdiv を持っています。その中には、左にフロートし、水平に並べて配置された div header-left-boxとheader-right-boxもあります。

それらの後、下の空きスペースを取るdivレシーバーを配置したいと思います。

問題は、受信側のdiv が他の div の下に表示されず、他の div の上に表示され、「オーバーレイ」していることです。私はそれについて何ができますか？レシーバーを他のdivより下にしたい。

コードは次のとおりです。 

<html>

<head>
<style type="text/css">
#header {
    position: absolute;
    width: 100%;
    height: 30%;
    margin: 0 auto;
}

#header-left-box {
    position: absolute;
    float: left;
    width: 40%;
    height: 100%;
    margin-left: 0px;
    border: 1px solid blue;
}

#header-right-box {
    position: absolute;
    float: left;
    margin-left: 50%;
    width: 50%;
    height: 100%;
    border: 1px solid red;
}

#header-right-box-content {
    position: absolute;
    bottom: 0;
    left: 0;
}

#header-left-box p {
    position:absolute;
    bottom: 0;
    font-size: 0.9em;  
}

#receiver {
    position: relative;
    width: 98%;
    border: solid 1px green;
}

</style>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<div id="header">
    <div id="header-left-box">
        <p>Left header box</p>
    </div>
    <div id="header-right-box">
        <div id="header-right-box-content">
            <p>Right header box</p>
        </div>
    </div>
</div>

<div id="receiver">Receiver</div>    
</body>

</html>
4

4 に答える 4

0

#header-left-boxあなたのと#header-right-boxはposition:absoluteであり、レシーバーは であるため、レシーバーはオーバーレイしていますposition:relative。あなたの解決策は、ヘッダーの左右のボックスをrelative配置するか、レシーバーを配置しabsoluteてtop:(place height of header left and right boxes here).

ここにフィドルがあります ( http://jsfiddle.net/hRcYF/ ) すべてがpositioned:relative. これが機能するには、レシーバーが必要でfloat:left (or right)あり、#header-right-boxフロートする必要があります。

于 2013-08-11T13:43:23.047 に答える
0

絶対配置はどこでも必要ありません。#header-right-boxそれらを撤回し、左に浮かんでいないことを確認してください。また、 をクリアしていることを確認してください#receiver。そのようです-

<style type="text/css">
#header {
    /*position: absolute;*/
    width: 100%;
    height: 30%;
    margin: 0 auto;
}

#header-left-box {
    /*position: absolute;*/
    float: left;
    width: 40%;
    height: 100%;
    margin-left: 0px;
    border: 1px solid blue;
}

#header-right-box {
    /*position: absolute;*/
    /*float: left;*/
    margin-left: 50%;
    width: 50%;
    height: 100%;
    border: 1px solid red;
}

#header-right-box-content {
    /*position: absolute;*/
    bottom: 0;
    left: 0;
}

#header-left-box p {
    /*position:absolute;*/
    bottom: 0;
    font-size: 0.9em;  
}

#receiver {
    position: relative;
    clear: both; /*Cleared previously floated elements*/
    width: 98%;
    border: solid 1px green;
}
</style>
于 2013-08-11T14:07:31.933 に答える