CSS position:absolute全面了解

2024-07-11 08:32:37

字體：大中小

來源：轉載

供稿：網友

一、絕對定位的特征

絕對定位有著與浮動一樣的特性，即包裹性和破壞性。

就破壞性而言，浮動僅僅破壞了元素的高度，保留了元素的寬度；而絕對定位的元素高度和寬度都沒有了。

請看下面代碼：

XML/HTML Code復制內容到剪貼板

<!DOCTYPE html> <html>
<head> <meta charset="utf-8">
<title>絕對定位的特征</title> <style>
.box1,.box2,.box3 { background-color: orange;
margin-bottom: 30px; }
.absolute {
position: absolute; }
.wraper {
display:inline-block; margin-left: 300px;
}
.float { float: left;
}
.box3 { position: absolute;
} </style>
</head> <body>
<div class="box1"> <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" /> <p>這是普通流中的兩幅圖像。</p>
</div> <div class="box2">
<img class="absolute" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" /> <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<div class="wraper">
<img class="float" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" /> <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
</div> <p>左圖，將第一幅圖像絕對定位，其完全脫離文檔流，并且覆蓋在第二幅圖像之上；由此看出，絕對定位的破壞性不僅讓元素沒有了高度，甚至沒有了寬度。</p>
<p>右圖，將第一幅圖像左浮動，其雖然脫離了文檔流，但是并沒有覆蓋在其他元素之上；浮動的破壞性僅僅破壞了元素的高度，而保留了元素的寬度。</p> </div>
<div class="box3"> <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" /> <p>將容器絕對定位，體現其包裹性。</p>
</div> </body>
</html>