彼此重疊部分

每個部分都與'主屏幕'部分重疊。這裏是實時鏈接Hello Sylhet。但頁面應該是這樣的彼此重疊部分

2017-09-03 Hussain Sumrat

歡迎的StackOverflow！爲了讓我們更好地爲您提供幫助，能否請您更新您的問題，以便在[**最小，完整和可驗證的示例**]中顯示**相關代碼**（http://stackoverflow.com/幫助/ mcve）在**問題本身**。如果您能讓我們知道您迄今爲止已經嘗試解決您的問題，也會有所幫助。有關詳細信息，請參閱有關[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask）的幫助文章，並參加該網站的[**遊覽**]（http://stackoverflow.com/tour）:) –

問題是在section#home-screen上position:absolute財產的錯誤使用。這部分內容正在被它後面的內容所覆蓋。您需要使用margin-top或空的div將元素向下推，以便#home-screen可見。

試試這個CSS：

#icon-search { 
    margin-top:60%; 
}

試圖修改此屬性的值和section#home-screen高度，以獲得您正在尋找的顯示。

注意1：正如@Obsidian Age在評論中正確提到的那樣，如果您使用JS Fiddle，Codepen等複製了您的問題，您將很快得到準確的代碼答案。

注意2：如果您想要一條建議，請不要將#home-screen視爲絕對位置。 position:absolute是棘手的，特別是如果它不在position:relative塊元素內。儘量避免它，除非你需要使用雙關語。使#home-screen爲flexbox，然後用負邊距推入下一部分。運行下面的代碼片段查看示例。

.home-screen, 
 
.icon-search { 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 

 
.home-screen { 
 
    border:1px solid red; 
 
    height:60vh; 
 
} 
 
.icon-search { 
 
    background-color:#fff; 
 
    justify-content:space-around; 
 
    margin: -25px auto 0; 
 
    height:50px; 
 
    width:90%; 
 
    border:1px solid blue; 
 
    border-radius: 25px; 
 
}

<div class="home-screen"> 
 
    <div class="searchbox">Search me <input type="text"></div> 
 
</div> 
 
<div class="icon-search"> 
 
    <div class="icons">icon1 icon2 icon3</div> 
 
</div>

來源

2017-09-04 00:06:06 Aydin4ik

彼此重疊部分

回答

相關問題