div的頂部填充不是相對於它上面的div

Question

我對HTML/CSS不太好。 Here是我正在嘗試編輯的網站。我不確定這是否應該在WordPress Stack中，因爲即使我的網站是在WordPress中，問題出在CSS上。另外，我對壞英語感到非常抱歉（我知道5種語言，所以它很難跟上）。 問題是網格（顯示產品目錄的Essential網格）和它上面的容器都是一個div的子節點。當我嘗試更改網格的填充時，它會相對於父div的頂部更改填充，而不是替換其頂部的同級。 我不知道什麼CSS屬性可能會影響這（我不是很擅長CSS），但我發佈了我認爲可能是問題的那些。請訪問鏈接並檢查元素（對不起..）

.child-on-top{ 
//acutal id on page is featured-111 
width: 99.8936px; 
height: 449px; 
background-size: 100% 100%; 
} 
.child-below{ 
position: relative; 
padding-top: 100px; 
} 
.parent{ 
//actual id is wrapper. 
position: relative; 
clear: both; 
} 

一個解決方案，到目前爲止已工作是，如果我增加的頂部填充至約500像素，這將增加子元素上方約50填充像素下面。但是，這隻能在桌面上使用。在手機中，您將獲得很多空閒空間。所以這不是一個真正的解決方案。

Answer 1

添加folowing css，然後檢查。您的編號爲featured-111的div從類grid中漂浮並由於此問題而創建。所以寫這個css

#featured-111{ 
float:none; 
}