關於CSS的position屬性
未完待續......最近在讀《CSS secrets》, 看完再來補充…… css
position
CSS的position屬性用於指定元素的定位類型。默認值: statichtml
4個可能的值:
static
元素按常規文檔流（從左到右 從上到下）定位；瀏覽器
靜態定位的元素不能使用 top, right, bottom 和 left 屬性進行定位。佈局
absolute
元素脫離文檔流；spa
元素相對於它包含的元素進行定位，相對於全部其餘元素，絕對定位的元素是獨立定位的。code
它的定位要麼相對於最近的祖先元素，要麼相對於文檔自己。htm
fixed
元素脫離文檔流，相對於瀏覽器窗口進行定位；blog
與其餘全部元素獨立；圖片
大多數瀏覽器支持，IE6 除外（大概也沒有公司要求必須支持 IE6 了=。=）。ip
relative
元素按照常規文檔流佈局，它的定位相對於他文檔流中的位置進行調整；
系統保留元素在正常文檔流中的空間，不會由於要填充空間而將其個邊合攏，也不會將元素重新的位置「推開」。
一些實例
position 的值爲 static 之外的值的元素，可經過設置元素 top 和 left 屬性指定其左邊緣到容器（一般是文檔自己）左邊緣的距離和其上邊緣到容器上邊緣的距離。
例如，定位一個距離文檔左、上邊緣分別是 100px 的 div 元素，能夠指定以下樣式：
<style>
div{
position:absolute;
top:100px;
left:100px;
}
</style>
若是一個元素使用絕對定位，它的 top 和 left 屬性是它相對於 position 屬性設置爲出 static 之外的祖先元素的上、左邊緣的距離。若是它沒有設置過除 static 之外的祖先，則使用文檔邊緣進行定位。
<!-- html -->
<body>
<div id="div1" class="lev1">
<div id="div1-1" class="lev2">div1-1</div>
</div>
<div id="div2" class="lev1">
<div id="div2-1" class="lev2">div2-1</div>
</div>
<div id="div3" class="lev1"></div>
</body>
<!-- css -->
<style>
body {
background-color: #eee;
color: #333;
}
.lev1{
width:200px;
height:200px;
background-color:yellowgreen;
border:1px solid #eee;
margin-top:20px;
margin-left:20px;
}
#div1{
}
#div2{
position:relative;
}
#div3{
background-color:purple;
}
.lev2{
position:absolute;
width:50px;
height:50px;
left:0;
top:10px;
background-color:red;
}
</style>
效果以下：
任何絕對定位的子元素都相對於容器進行定位。
使用 top 和 left 定位元素的左上角位置是常見的定位方法，也能夠使用 right 和 bottom 對指定元素相對於容器的右、下邊緣進行定位。
除了指定元素 width 來肯定元素寬度，還可用過指定 left 和 right 的方式（一樣，也可經過指定 top 和 bottom 來指定元素的高度）。 同時指定時，width 優先級高於 right/left, height 優先級高於 bottom/top; left 優先級高於 right, top 優先級高於bottom.
不必給每個動態元素指定尺寸。某些元素（如圖片）具備固定尺寸。對於包含文本或其餘流式內容的動態元素一般指定寬度就足夠了，讓佈局決定它的高度。
- 1. 關於CSS的佈局：position屬性
- 2. css的position屬性
- 3. CSS position 屬性
- 4. CSS position屬性、float屬性
- 5. CSS中Position屬性
- 6. CSS 之 Position 屬性
- 7. CSS 佈局的position屬性、float屬性
- 8. CSS中的Position屬性 overflow 屬性
- 9. CSS中的Position屬性
- 10. jquery的animate關於background-position屬性
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • ☆基於Java Instrument的Agent實現
- • NewSQL-TiDB相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。