HTML+CSS 輕鬆入門之層模型
什麼是層模型？
什麼是層佈局模型？層佈局模型就像是圖像軟體PhotoShop中非常受歡迎的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。但是在網頁上局部使用層佈局還是有其方便之處的。下面我們來學習html中的層佈局。
如何讓html元素在網頁中精確定位，就像圖像軟體PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。 CSS定義了一組定位（positioning）屬性來支援層佈局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
絕對定位 程式碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
position:absolute; /*绝对定位*/
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
</html>相對定位，程式碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
position:relative;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
</html>如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它透過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是先按static(float)方式產生一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
固定定位
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
position:fixed;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="dv1"></div>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
</body>
</html>
