用戶在瀏覽網站時經常會看到左側有一種宣傳欄，它不會隨着鼠標滾動而不被用戶看到，它會始終以頁面的中心爲參照物始終保持在左側一個固定的位置，今天我們來做一下這個小例子，讓我們先了解一下盒模型和相對丶絕對位置的前端知識。
盒模型分爲兩種一種是標準模型，另一種是IE模型，它的組成由外向裏是margin，border，padding，content，如下兩個圖所示。
標準模型，寬高均爲內容（content）的寬高
IE模型，寬高爲內容(content)+填充(padding)+邊框(border)的總寬高。
}
寬爲：200+10*2+20*2=260px，高爲：200+10*2+10+30=260px，要注意的是邊框（border）和填充（padding）要各計算兩次，如果有content的值也要加上。
在用CSS+DIV進行佈局定位的時候，一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚，以致經常會出現讓人很鬱悶的結果。這裏我們在此總結一下：
先看下position各個屬性值的定義：
1、static：默認值。沒有定位，元素出現在正常的流中（忽略top,bottom,left,right或者z-index聲明）。
2、relative：生成相對定位的元素，通過top,bottom,left,right的設置相對於其正常位置進行定位。可通過z-index進行層次分級，relative作爲參照物，absolute來定位，relative保留原來的位置進行定位。
3、absolute：生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級，absolute會相對與最近的父級的定位來定位，如果父級沒有定位則會相對與文檔定位也就是說脫離原來的位置進行定位。
4、fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定，利用該屬性來製作我們今天的例子，可通過z-index進行層次分級。
注意：z-index是數學模型中的z軸，也就是說電腦屏幕離我們面部的距離遠近，該值默認爲0可以改變數值的大小來改變這個距離從而分成不同的層。
回顧下上面的內容就可以着手做我們的廣告欄了，首先在html文件中新建一個<div></div>，爲了顯示效果在<div>下生成多個換行標籤<br>
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="D:\各類型文檔\css\lesson2.css"> </head> <body> <div>愛國敬業文明民主和諧...</div> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> </body> </html>下面是css的代碼：
*{
margin: 0;
padding: 0;
}
div{
position: fixed;
width: 50px;
height: 200px;
left: 0;
top: 300px;
background-color: green;
}可以看到css代碼首先將填充和外邊距設置爲0，這也是我們在開發前端css代碼時首先做的事情將默認的數值清0，接下來設置的是div的屬性fixed屬性將盒模型定位，盒模型是一個緊貼瀏覽器左側距離上部300px的長方形，下圖是瀏覽器中的展示效果：
這樣我們就實現了鼠標滾動而廣告欄不隨着移動定位在固定位置的效果。
擴展：利用position的absolute屬性可以實現奧運五環的效果，absolute是相對父級的位置來定位的，首先可以寫一個<div></div>來作爲五環的畫布也就是父級<div>，這個父級標籤是居中的設置它的left和top屬性均爲相對於頁面的50%大小，margin-left和margin-top也需要調整對應的負數像素，這樣不管瀏覽器是否縮放與全屏父級標籤均保持在屏幕正中央，同時父級標籤也不能隨着鼠標滾輪的滾動而改變位置設置position屬性爲fixed。
畫圓的時候將圓角的彎曲程度改爲50%即爲正圓，五環的上面三個圓高寬相同，相隔距離相同，相對於父級邊框的位置不同，即兩圓之間向隔一個圓的寬度加上一定的像素，這裏我設置的圓的寬高爲170px，間隔爲50px則兩圓的圓心距離爲220px。下面的兩個圓與上面的三個圓高度不同具體高度可以自行設置margin-top並將z-index的屬性設爲1，表明下面的兩個圓覆蓋在上面的三個圓上，五個圓都在畫布父類中故position屬性爲absolute相對與父類的位置。
html代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="D:\各類型文檔\css\lessone3.css">
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>css代碼如下:
*{
margin: 0;
padding: 0;
}
.wrapper{
position: fixed;
left: 50%;
top: 50%;
border: 2px;
width: 1000px;
height: 700px;
background-color: #999;
margin-left: -500px;
margin-top: -350px;
}
.box1{
position: absolute;
margin-left: 200px;
margin-top: 200px;
width: 170px;
height: 170px;
border: 10px solid #006;
border-radius: 50%;
}
.box2{
position: absolute;
margin-left: 420px;
margin-top: 200px;
width: 170px;
height: 170px;
border: 10px solid black;
border-radius: 50%;
}
.box3{
position: absolute;
margin-left: 640px;
margin-top: 200px;
width: 170px;
height: 170px;
border: 10px solid #B00;
border-radius: 50%;
}
.box4{
position: absolute;
margin-left: 310px;
margin-top: 300px;
width: 170px;
height: 170px;
border: 10px solid yellow;
border-radius: 50%;
z-index: 1;
}
.box5{
position: absolute;
margin-left: 530px;
margin-top: 300px;
width: 170px;
height: 170px;
border: 10px solid green;
border-radius: 50%;
z-index: 1;
}頁面效果如下：
感謝觀看！
