定位 position屬性

2022-08-30 04:42:10 字數 1243 閱讀 4549

一.定位--position屬性

1.static:預設值 沒有定位--以標準文件流方式顯示

2.relative:相對定位--相對自身原來的位置進行偏移(top left right bottom)

3.absolute:絕對定位

4.fixed:固定定位

二.相對定位元素的規律

1.設定相對定位的盒子會相對它原來的位置,通過指定偏移到達新的位置

2.設定相對定位的盒子仍在標準文件流中,它對父級盒子和相鄰盒子都沒有影響

三.絕對定位-- absolute屬性

1.偏移位置:left right top bottom

2.使用了絕對定位的元素以它最近的乙個「已經定位」的「祖先元素」為基準進行偏移,

如果沒有已近定位的「祖先元素」那麼會以為瀏覽器為基準進行偏移

3.絕對定位的元素從標準文件流中脫離,這意味著它們對其他元素的定位不會造成影響

4.絕對定位不設定偏移量元素將保持原來的位置,但脫離標準文件流

四.調整元素定位重疊層的上下位置

1.z-infex屬性值:整數預設值為0

2.設定position屬性時z-iindex屬性可以設定各元素之間的重疊高低關係

3.z-index值大的層位於其小的層上方

1.static:預設值 沒有定位--以標準文件流方式顯示

2.relative:相對定位--相對自身原來的位置進行偏移(top left right bottom)

3.absolute:絕對定位

4.fixed:固定定位

二.相對定位元素的規律

1.設定相對定位的盒子會相對它原來的位置,通過指定偏移到達新的位置

2.設定相對定位的盒子仍在標準文件流中,它對父級盒子和相鄰盒子都沒有影響

三.絕對定位-- absolute屬性

1.偏移位置:left right top bottom

2.使用了絕對定位的元素以它最近的乙個「已經定位」的「祖先元素」為基準進行偏移,

如果沒有已近定位的「祖先元素」那麼會以為瀏覽器為基準進行偏移

3.絕對定位的元素從標準文件流中脫離,這意味著它們對其他元素的定位不會造成影響

4.絕對定位不設定偏移量元素將保持原來的位置,但脫離標準文件流

四.調整元素定位重疊層的上下位置

1.z-infex屬性值:整數預設值為0

2.設定position屬性時z-iindex屬性可以設定各元素之間的重疊高低關係

3.z-index值大的層位於其小的層上方

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...

position屬性定位

1 html中有三種布局方式 標準流 順序布局 浮動 定位 層模型 position 塊級元素單獨佔一行從上到下排列,行內元素共享一行 position改變元素正常的標準流,以非正常的方式脫離標準流 需要有left right top bottom設定值,否則仍然是處於標準的文件流中的 後寫的元素會...

CSS 定位position屬性

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容,即 塊框 與之相反,span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中,即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block,可以讓行內元素...