-1
目前我正在爲一個項目開發一個PSD設計，並且在這個設計中，一個部分有一個完全不同的形狀以吸引外觀。爲什麼靜態元素的「margin-top」屬性影響絕對元素的「top」屬性？
要創建該形狀，我創建了一個svg文件，並將其用作背景並通過絕對屬性定位該部分。在這個絕對定位部分之後還有另一個部分，它需要在絕對定位部分之後。
爲了對齊這個靜態部分，我嘗試使用「margin-top」屬性。現在問題出現了。 margin-top屬性影響絕對定位部分的「top」屬性。保證金屬性也在將絕對定位的元素位置與t一起移動
這是令我感到困惑的問題，我無法爲此找到解決方案。
我在下面共享了一個示例設計，描述了這個問題。
我希望我能對此查詢得到積極的迴應。除了這種改進建議關於設計開發也將不勝感激。
*{
margin: 0;
padding: 0;
}
\t \t \t
#main-container{
position: relative;
}
\t \t \t
#section-1{
background-color: #e48b21;
height: 500px;
}
\t \t \t
#section-2{
height: 1000px;
width: 100%;
background-color: green;
position: absolute;
top: 70%;
}
\t \t \t
#section-2 p{
margin-top: 10%;
}
\t \t \t
#section-3{
background-color: #808080;
margin-top: 70%;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Test 101</title>
\t </head>
\t
\t <body>
\t \t <div id="main-container">
\t \t \t
\t \t \t <div id="section-1">
\t \t \t \t <p>Some Text</p>
\t \t \t </div>
\t \t \t
\t \t \t <div id="section-2">
\t \t \t \t <p>Some Text</p>
\t \t \t </div>
\t \t \t
\t \t \t <div id="section-3">
\t \t \t \t <p>Some Text</p>
\t \t \t </div>
\t \t \t
\t \t </div>
\t </body>
</html>
@ giorgio的回答應該澄清你的問題。但是，您實際上在尋找什麼效果？也許我們可以幫助你。 – Aslam
我只想將第2部分放在第2部分前面的第1部分和第3部分。第2部分有一個背景圖像，它是一個形狀，用於使網頁看起來更具吸引力。 –
你已經給了部分高度，所以你不需要位置的百分比值。你可以使用像素值。希望這可能會對你有所幫助。 – Aslam