相對定位 絕對定位 固定定位 粘滯定位(css)

2021-10-06 22:40:10 字數 1541 閱讀 1789

定位(position)

position: ***;

可選值static(預設值)元素是靜止的沒有開啟定位

relative開啟元素的相對定位

absolute開啟元素的絕對定位

fixed開啟元素的固定定位

sticky開啟元素的粘滯定位

相對定位position: relative;

元素開啟相對定位後,如果不設定偏移量,元素不會發生任何變化

相對定位是參照於元素在文件流中的位置進行定位

相對定位會提公升元素的層級

相對定位不會使元素脫離文件流

相對定位不會改變元素的性質,塊還是塊,行內還是行內

偏移量(offset)

偏移量offset

top定位元素和定位位置上邊的距離

bottom定位元素和定位位置下邊的距離

left定位元素和定位位置左側的距離

right定位元素和定位位置右側的距離

posiotion

: relative;

left

: 100px;

top: 200px;

絕對定位position: absolute

開啟絕對定位後,如果不設定偏移量,元素的位置不會發生變化

開啟絕對定位後,元素會從文件流中脫離

絕對定位會改變元素的性質,行內變成塊,塊的寬高被內容撐開

絕對定位會使元素提公升乙個層級

絕對定位元素是相對於其包含塊進行定位的

包含塊( containing block )

固定定位position: fixed

粘滯定位position: sticky

可設定auto的值:margin width left right由於 left 和 right 的值預設是auto,所以如果不知道left和right,則等式不滿足時,會自動調整這兩個值

水平布局

left + margin-left/right + border-left/right + padding-left/right +width = 包含塊的內容區的寬度

垂直布局

top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含塊的高度

對於開啟了定位元素,可以通過z-index屬性來指定元素的層級,z-index 需要乙個整數作為引數,值越大元素的層級越高,元素越優先顯示

相對定位 絕對定位 固定定位

設定position屬性值為static的元素是乙個靜態定位元素,此值為預設值,即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素,其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...

css 相對定位,絕對定位,固定定位

定位有三種,分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位,就是微調元素位置的。讓元素相對自己原來的位置,進行位置調整。head meta charset ut...

絕對定位,相對定位,固定定位

通過position屬性來設定元素的定位 static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化 相對定位是相對於...