position 屬性 規定元素的定位型別

2021-08-22 02:31:06 字數 1137 閱讀 1253

元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行定位。

1.static

預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)

2.absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。

3.relative

生成相對定位的元素,相對於其原位置進行定位。

因此,」left:20」 會將元素的相對原位置向左偏移20 畫素。

4.fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

5.inherit

規定應該從父元素繼承 position 屬性的值

舉例說明(未與float並用)

postion:relative

該元素原位置依然保留,

使用定位關鍵字left/right/top/bottom 進行移動(相對自己原位置)

兄弟塊元素之間定位是基於該元素移動前的位置(不受該元素影響)

關鍵點:

相對自己原位置,兄弟元素不受影響

演示**

charset="utf-8">

postion:relative演示**title>

* body

ulli

#li1

#li2

#li3

style>

head>

id=#id>

id=li1>li1li>

id=li2>li2li>

id=li3>li3li>

ul>

body>

html>

css中元素的position屬性詳解

position屬性有五個可以設定的值,分別是static,absolute,relative,fixed,inherit static 預設值,無定位 元素仍然存在於標準文件流中 absolute 絕對定位,元素相對於它的第乙個定位父級元素進行定位。元素的位置可以通過top,right,botto...

position屬性在父級元素和子級元素中的影響

父層class zi1 子層1div class zi2 子層2div div body html 兩個父級物件新增position absolute後 將最外層的父級物件去掉後 保留最外層父物件的position absolute,取消第二層的div的絕對定位 設定該屬性後,物件會脫離正常文件流,...

position 的屬性值

理論上來說,全部 position 的取值有8個 包括 position static relative absolute fixed sticky initial inherit unset 其中最常用的是 static relative absolute fixed 和 sticky initi...