CSS位置：相對和絕對問題
[英]CSS Position: relative and absolute issue
問題描述
您可以在Design Prototype上看到我的布局原型。
我有兩個：標頭和容器。 標頭區域必須放在容器上方。 標頭有兩個子元素：徽標DIV和徽標標題DIV。 他們的職位被評定為上級[Header DIV]。 因此，我將標頭的位置設置為相對，並將子級（徽標和徽標標題）設置為絕對。
但是之后，Container並沒有放在標題區域下面！ 當我從徽標DIV和徽標TITLE DIV中刪除絕對位置時，容器確定！ 但是我可以從parent（Header）對齊徽標和徽標標題。
為什么？ 容器不是Header的子級！ 如何解決？
謝謝。
@charset "utf-8"; body{ margin: 0 auto; width: 980px; background-color: #f1f1f1; } #header{ position: relative; background-color: yellow; height: 154px; } #logo{ position: absolute; background-color: green; width: 123px; height: 146px; margin-top: 4px; margin-left: 4px; } #logo-title { position: absolute; color: darkblue; font-size: 16pt; bottom: 0; margin-left: 60px; } #container { background-color: white; height: 600px; width: 980px; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <link href="style.css" rel="stylesheet"/> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"/> <div id="logo-title">Logo-Title</div> </div> <div id="container"></div> </div> </body> </html>
2 個解決方案
解決方案1
1 已采納 2016-06-18 09:45:22
logo上使用的單個標簽關閉不適用於div元素，因此我將其更改為
<div id="logo"></div>
將您的container塗成red臨時顏色，這樣您就可以看到它現在可以正確顯示了
@charset "utf-8"; body{ margin: 0 auto; width: 980px; background-color: #f1f1f1; } #header{ position: relative; background-color: yellow; height: 154px; } #logo{ position: absolute; background-color: green; width: 123px; height: 146px; margin-top: 4px; margin-left: 4px; } #logo-title { position: absolute; color: darkblue; font-size: 16pt; bottom: 0; margin-left: 60px; } #container { background-color: red; height: 600px; width: 980px; }
<div id="wrapper"> <div id="header"> <div id="logo"></div> <div id="logo-title">Logo-Title</div> </div> <div id="container"></div> </div>
解決方案2
1 2016-06-18 09:50:27
您的logo div語法不正確，總是使用close div標簽關閉div，例如<div id="logo"></div>
CSS位置相對和絕對
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.