CSS定位

相對定位

如果將 top 設(shè)置為 20px,那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素,那么會在元素左邊創(chuàng)建 30 像素的空間,也就是將元素向右移動。

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

絕對定位

絕對定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。這一點(diǎn)與相對定位不同,相對定位實(shí)際上被看作普通流定位模型的一部分,因?yàn)樵氐奈恢孟鄬τ谒谄胀髦械奈恢谩?br> 普通流中其它元素的布局就像絕對定位的元素不存在一樣:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
<p>通過絕對定位,元素可以放置到頁面上的任何位置。下面的標(biāo)題距離頁面左側(cè) 100px,距離頁面頂部 150px。</p>
</body>

</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容