前端筆記 相對定位

2021-10-08 21:42:42 字數 942 閱讀 1480

定位(position)

-定位是一種更加高階的布局手段

-通過定位可以將元素擺放到頁面的任意位置

-使用position屬性來設定定位

可選值:

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

relative:開啟元素的相對定位

absolute:開啟元素的絕對定位

fixed:開啟元素的固定定位

sticky:開啟元素的粘滯定位

1.相對定位(relative):

-當元素的position屬性值設定為ralative時則開啟了元素的相對定位

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

-相對定位的特點:

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

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

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

4.相對定位不會使元素脫離文件流,不會改變元素的性值,行內還是行內。塊還是塊

2.偏移量(offset)

當元素開啟了定位以後,可以通過偏移量來設定元素的位置

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

bottom

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

-定位元素垂直方向的位置由top和bottom兩個屬性來決定

通常情況下我們只會使用其中之一

-top值越大,定位元素越向下

-bottom值越大,定位元素越向上

left

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

-定位元素水平方向的位置由left和right兩個屬性決定

通常情況下只會使用乙個

left越大,元素越向右,right越大,元素越向左

"box1">1

"box2">2

"box3">3

前端CSS 相對定位,絕對定位,固定定位

position relative 必須先宣告,自己要相對定位了,left 100px 然後進行調整。top 150px 然後進行調整。相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.position relative right 100px 往左邊移動 top 100px posi...

前端html 固定位置 相對定位 絕對定位

定位元素都完全脫離文件流 1.不加定位狀態 2.相對定位 position relative top 50px left 50px 1.完全脫離文件流 2.它在文件流中的位置還會被保留 下面的內容不會上竄 3.相對於它原來的位置進行位置變化 變化距離相對於原位置 2.絕對定位 position ab...

相對定位,絕對定位

絕對定位是相對于父標籤決定位置,一般用於相對定位標籤裡面,js特效經常用到。相對定位是相對於上乙個相對定位的。一般用於浮動定位標籤裡面,一般跟絕對定位配合使用。浮動定位才是常用的。看例子 以下只說id名代表div 絕對定位 position absolute 如果bq1 絕對定位 外面沒有div等父...