當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

034_CSS绝对定位

發(fā)布時間：2025/4/17 CSS 86 豆豆

生活随笔收集整理的這篇文章主要介紹了 034_CSS绝对定位小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 設(shè)置為絕對定位的元素框從文檔流完全刪除, 并相對于其包含塊定位, 包含塊可能是文檔中的另一個元素或者是初始包含塊(body)。元素原先在正常文檔流中所占的空間會關(guān)閉, 就好像該元素原來不存在一樣。元素定位后生成一個塊級框, 而不論原來它在正常流中生成何種類型的框。

2. CSS絕對定位

2.1. 絕對定位使元素的位置與文檔流無關(guān), 因此不占據(jù)空間。這一點與相對定位不同, 相對定位實際上被看作普通流定位模型的一部分, 因為元素的位置相對于它在普通流中的位置。

2.2. 普通流中其它元素的布局就像絕對定位的元素不存在一樣:

#box_relative {position: absolute;left: 30px;top: 20px; }

2.3. 如下圖所示:

2.4. 絕對定位的元素的位置相對于最近的已定位祖先元素, 如果元素沒有已定位的祖先元素, 那么它的位置相對于最初的包含塊。

2.5. 根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 html?元素。

2.6. 因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。

3. 絕對定位例子

3.1. 代碼

<!DOCTYPE html> <html><head><title>絕對定位</title><meta charset="utf-8" /><style type="text/css">div {width: 400px;height: 200px;}.img1 {background: red;}.img2 {background: blue; }.img3 {background: green;}.img2.img2-1 {position: absolute; top: 20px; left: 30px;}.img2.img2-2 {position: absolute; top: 20px; left: 30px;}</style></head><body><div style="background: yellow;"><img src="CrashBtn.png" class="img1" /><img src="MagicBtn.png" class="img2 img2-1" /><img src="RefreshBtn.png" class="img3" /></div><div style="background: pink; position: relative;"><img src="CrashBtn.png" class="img1" /><img src="MagicBtn.png" class="img2 img2-2" /><img src="RefreshBtn.png" class="img3" /></div></body> </html>

3.2. 效果圖

4. z-index屬性

4.1. 定義和用法

?4.1.1. z-index屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

?4.1.2. 元素可擁有負的z-index屬性值。

?4.1.3. z-index僅能在定位元素上奏效(例如: position:?absolute;)。

?4.1.4. 該屬性設(shè)置一個定位元素沿z軸的位置, z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù), 則離用戶更近, 為負數(shù)則表示離用戶更遠。

4.2. 默認值

4.3. 可能的值

4.4. 例子

4.4.1. 代碼

<!DOCTYPE html> <html><head><title>z-index屬性</title><meta charset="utf-8" /><style type="text/css">div {background-color: #00FFFF;width:150px;height:150px;}img {background-color: red;position: absolute;left: 0;top: 0;z-index: -1;}</style></head><body><div></div><img src="CrashBtn.png" /></body> </html>

4.4.2. 效果圖

5. clip屬性

5.1. clip屬性剪裁絕對定位元素。

5.2. 默認值

5.3. 可能的值

5.4. 例子

5.4.1. 代碼

<!DOCTYPE html> <html><head><title>剪裁絕對定位元素</title><meta charset="utf-8" /><style type="text/css">div {width: 300px; height: 300px; border: 1px solid red;}img {position: absolute; clip: rect(0, 60px, 100px, 0); background-color: red;}</style></head><body><div><img src="CrashBtn.png" alt="CrashBtn.png" /></div></body> </html>

5.4.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的034_CSS绝对定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

_CSS