纏繞位置：相對

如何使這個特殊的問題圍繞着藍色和黃色的div綠格包裝（他的孩子）：纏繞位置：相對

HTML

<div id="main"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 
<div id="footer"></div>

CSS

#main { 
    width: 100%; 
    background-color: green; 
    z-index: -2; 
    position: relative; 
    margin-bottom: 10px; 
} 

#one { 
    width: 100%; 
    height: 150px; 
    background-color: blue; 
    position: absolute; 
    z-index:-1; 
} 

#two { 
    position: relative; 
    top: 100px; 
    z-index:3; 
    width: 300px; 
    height: 500px; 
    background-color: yellow; 
    margin: 0px auto; 
}

來源

2015-08-28 Jesus Christ

你能解釋更多嗎？綠色的div已經包裹了藍色和黃色的div，但它被藍色覆蓋。 –

你不能使任何東西「環繞」絕對定位的元素（如果這就是你要求的），它們會完全脫離佈局流程的其餘部分。 – CBroe

我希望它包裹到黃色部分的底部 –

綠色div包裹在藍色div上。它不會出現這種方式，因爲藍色的div在最上面。

使用div #two您將其定位爲相對頂部100px。當你定位一些相對的東西時，你會將div的可視化組件移動到它自然落在瀏覽器中的位置。這相當於說「從你所在的位置向下移動150px」。你可以做出綠色的東西，但我不認爲這就是你要做的。

我認爲你正在試圖做的（和請糾正我，如果我錯了）的東西，是這樣的： https://jsfiddle.net/dk6L1zLL/

#main { 
 
    width: 100%; 
 
    background-color: green; 
 
    z-index: -2; 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
    padding-top:10px; 
 
    padding-bottom:10px; 
 
} 
 

 
#one { 
 
    //width: 100%; 
 
    height: 150px; 
 
    background-color: blue; 
 
    //position: absolute; 
 
    z-index:-1; 
 
    margin:0 10px 0; 
 
} 
 

 
#two { 
 
    //position: relative; 
 
    //top: 100px; 
 
    z-index:3; 
 
    width: 300px; 
 
    height: 500px; 
 
    background-color: yellow; 
 
    margin: 0px auto; 
 
    /*margin-bottom: 500px;*/ 
 
} 
 

 
#footer { 
 
    height: 100px; 
 
    background-color: red; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: -3; 
 
}

<body> 
 
    <div id="main"> 
 
     <div id="one"></div> 
 
     <div id="two"></div> 
 
    </div> 
 
    <div id="footer"></div> 
 
</body>

我擺脫了很多的定位規則並添加了一些邊距和填充。

來源

2015-08-28 16:09:53 SteveB

纏繞位置：相對

回答

相關問題