12-6層模型--絕對定位 · 初識HTML+CSS

## 層模型--絕對定位如果想為元素設置層模型中的絕對定位，需要設置**position:absolute**(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于**瀏覽器窗口**。如下面代碼可以實現div元素相對于瀏覽器窗口向右移動100px，向下移動50px。 ~~~ div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div> ~~~ 效果如下： ![](http://img.mukewang.com/53a00b130001e86707360547.jpg) ### 任務我來試一試:設置div標簽相對于瀏覽器，（相對于以前位置**右上角**）向左移動100象素，向下移動20象素。效果圖如下： [![](http://img.mukewang.com/53d6f8110001914706630445.jpg)](http://img.mukewang.com/53d6f8110001914706630445.jpg) ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>absolute樣式</title> <style type="text/css"> div{ width:200px; height:200px; border:2px red solid; position:absolute; right:100px; top:20px; } </style> </head> <body> <div id="div1"></div> </body> </html> ```