如果想為元素設置層模型中的絕對定位,需要設置`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>
~~~
效果如下:

- HTML+CSS基礎
- HTML
- Html和CSS的關系
- 認識html文件基本結構
- 了解HTML的代碼注釋
- 語義化,讓你的網頁更好的被搜索引擎理解
- 加入強調語氣,使用<strong>和<em>標簽
- <q>標簽,短文本引用
- <hr>標簽,添加水平橫線
- <address>標簽,為網頁加入地址信息
- caption標簽,為表格添加標題和摘要
- CSS
- CCS子選擇器
- CSS包含(后代)選擇器
- CSS通用選擇器
- CSS偽類選擇符
- CSS分組選擇符
- CSS繼承
- CSS特殊性
- CSS層疊
- CSS重要性
- 段落排版--中文字間距、字母間距
- 元素分類--塊級元素
- 元素分類--內聯元素
- 元素分類--內聯塊狀元素
- 什么是層模型?
- 層模型--絕對定位
- 層模型--相對定位
- 層模型--固定定位
- Relative與Absolute組合使用