css的佈局模型(三)—層模型
阿新 • • 發佈：2019-01-26
三、層模型
什麼是層模型？層模型就像是影象軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支援層佈局模型。
在學習層模型之前，我們需要先了解一下層模型的三種形式：
1.絕對定位
2.相對定位
3.固定定位
那麼問題就來了，什麼是定位了，定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。定位主要通過CSS中的position屬性來實現的。
一.絕對定位
設定position：absolute ：絕對定位的元素的位置相對於最近的已定位祖先元素
我們通過下面的一段程式碼來了解絕對定位
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,span{
position: absolute;
}
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
span{
left: 100px;
top:50px;
}
</style>
</head>
<body>
<div>
<span>絕對定位</span>
</div>
</body>
</html>
執行結果：
這裡我們可以看到，span和div的position屬性的值都為absolute，即為絕對定位，所以span的位置是相對於他父元素div而確定位置。此時我們設定span的left和top值，也是相對於div的。
