CSS中絕對定位解釋

w3school中有這樣一句話“絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊”

什麼是已定位的祖先元素,經查閱資料及測試,已定位的祖先元素就是有position屬性,且position的值爲absolute或者relative的父元素。

什麼是最初的包含塊,即html畫布(看起來也就是body區域)。


之前遇到一個問題,兩個div嵌套,怎麼使第二個div總是在第一個div的底部並且居中?

要在底部就用到了絕對定位,讓第一個元素position的值爲absolute或者relative,第二個元素的position屬性值爲absolute,且設置bottom爲0px即可。

要居中,我們可以設置left: 50%; margin-left: -第二個div寬度一半px;


最好讓第一個元素的postion的值爲relative,這樣的話,它還佔據文檔流,如果設置爲absolute的話,他就不再佔據文檔流,對後面的標籤的佈局將會產生比較大的影響。

示例代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>無標題文檔</title>
<style>   

.div1{width: 1000px;height: 500px; border: 5px solid red;position: relative;  margin: 0 auto; }   
.div2{width:500px; height: 20px; border: 5px solid red; position: absolute;bottom: 0px; left: 50%; margin-left: -250px; }   
</style>

</head>
<body>
<div class="div1">
	測試一下
	<div class="div2">2222</div>
</div>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章