034_CSS绝对定位
1. 設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除, 并相對(duì)于其包含塊定位, 包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊(body)。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉, 就好像該元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框, 而不論原來(lái)它在正常流中生成何種類(lèi)型的框。
2. CSS絕對(duì)定位
2.1. 絕對(duì)定位使元素的位置與文檔流無(wú)關(guān), 因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同, 相對(duì)定位實(shí)際上被看作普通流定位模型的一部分, 因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。
2.2. 普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣:
#box_relative {position: absolute;left: 30px;top: 20px; }2.3. 如下圖所示:
2.4. 絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素, 如果元素沒(méi)有已定位的祖先元素, 那么它的位置相對(duì)于最初的包含塊。
2.5. 根據(jù)用戶代理的不同，最初的包含塊可能是畫(huà)布或 html?元素。
2.6. 因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素?？梢酝ㄟ^(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序。
3. 絕對(duì)定位例子
3.1. 代碼
<!DOCTYPE html> <html><head><title>絕對(duì)定位</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è)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
?4.1.2. 元素可擁有負(fù)的z-index屬性值。
?4.1.3. z-index僅能在定位元素上奏效(例如: position:?absolute;)。
?4.1.4. 該屬性設(shè)置一個(gè)定位元素沿z軸的位置, z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù), 則離用戶更近, 為負(fù)數(shù)則表示離用戶更遠(yuǎn)。
4.2. 默認(rèn)值
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屬性剪裁絕對(duì)定位元素。
5.2. 默認(rèn)值
5.3. 可能的值
5.4. 例子
5.4.1. 代碼
<!DOCTYPE html> <html><head><title>剪裁絕對(duì)定位元素</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绝对定位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 033_CSS相对定位
- 下一篇： 035_CSS浮动