web前端練習3----css的position屬性理解
阿新 • • 發佈：2019-01-02
position: fixed;元素的位置相對於瀏覽器視窗是固定位置。即使視窗是滾動的它也不會移動：
用法：
position: fixed;
left: 0px;
top: 0px;
下面主要講相對定位和絕對定位
position: relative; 相對定位元素的定位是相對其正常位置。
position: absolute; 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於:
結合下面的例子解釋：
父元素box中， 必須設定 position: relative; 相對定位；
子元素icon1中， position: absolute; 絕對定位；
子元素icon1才會在父控制元件box裡面擺放；
如果元素box不設定position: relative，則子元素是在body中擺放；
原始碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } .box { width: 500px; height: 500px; background-color: yellow; position: relative; left: 20px; top: 20px; } /* * 父元素box中， 必須設定 position: relative; 相對定位 * 子元素icon1中， position: absolute; 絕對定位 * 子元素icon1才會在父控制元件box裡面擺放 * 如果元素box不設定position: relative，則子元素是在body中擺放的 */ .icon1 { width: 200px; height: 200px; background-color: aqua; position: absolute; left: 20px; top: 20px; } </style> </head> <body> <div class="box"> <div class="icon1"></div> </div> </body> </html>
參考連結：
http://www.runoob.com/css/css-positioning.html
根據上面知識，寫了一個例子:
如圖：
實現程式碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } .box { width: 100%; height: 100px; background-color: yellow; /*父元素設定為相對定位*/ position: relative; left: 0px; top: 0px; } /* * 父元素box中， 必須設定 position: relative; 相對定位 * 子元素icon1中， position: absolute; 絕對定位 * 子元素icon1才會在父控制元件box裡面擺放 * 如果元素box不設定position: relative，則子元素是在body中擺放的 */ .icon1 { /*子元素設定為絕對佈局*/ position: absolute; left: 0px; top: 0px; /*設定層級*/ z-index: 2; line-height: 100px; text-align: center; width: 100px; background-color: aqua; font-size: 25px; } .biaoti{ position: absolute; z-index: 1; line-height: 100px; text-align: center; width: 100%; background-color: crimson; font-size: 30px; } .icon2{ position: absolute; right: 0px; top: 0px; z-index: 2; line-height: 100px; text-align: center; width: 100px; background-color: greenyellow; font-size: 25px; } </style> </head> <body> <div class="box"> <div class="icon1">左邊</div> <div class="biaoti">標題</div> <div class="icon2">右邊</div> </div> </body> </html>