HTML+CSS 輕松入門之層模型
什么是層模型？
什么是層布局模型？層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個(gè)圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁大小的活動(dòng)性，層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的。下面我們來學(xué)習(xí)一下html中的層布局。
如何讓html元素在網(wǎng)頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對(duì)每個(gè)圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2、相對(duì)定位(position: relative)
3、固定定位(position: fixed)
絕對(duì)定位 ?代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>層模型</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
position:absolute; /*絕對(duì)定位*/
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
</html>相對(duì)定位，代碼如下：
<!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>如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置position:relative（表示相對(duì)定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。
固定定位
<!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 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
<p>php 中文網(wǎng)</p>
<p>學(xué)習(xí)電腦</p>
<p>二次開發(fā)</p>
</body>
</html>
