HTML學習之CSS定位

2021-10-24 20:50:45 字數 1007 閱讀 7628

css可以使用屬性position來實現定位

屬性值作用

具體說明

relative

相對定位

相對元素自己原有位置移動指定的距離,可以使用top、left、right、bottom進行設定,其他元素的位置不會隨之改變

absolute

絕對定位

可以使元素參照介面或者相對父元素進行移動,可以使用top、left、right、bottom進行設定,注意:如果父元素成為參照元素,必須對父元素使用相對定位屬性,預設情況下是以介面為基準進行移動的

fixed

固定定位

將元素固定顯示在頁面的指定位置,不會隨著滾動條的移動而改變位置,可以使用top、left、right、bottom進行設定,

補充:在定位元素中,我們可以使用z-index屬性來宣告元素顯示級別。

>

>

>

演示title

>

charset

="utf-8"

/>

type

="text/css"

>

#div1

#div2

#div3

#div001

#div4

style

>

head

>

>

"div1"

>

"div001"

>

div1div

>

div>

"div2"

>

div2div

>

"div3"

>

div3div

>

"div4"

>

div4div

>

body

>

html

>

HTML與CSS基礎之CSS定位

值 語義static 靜態定位 relative 相對定位 absolute 絕對定位 fixed 固定定位 邊偏移屬性 示例描述 toptop 80px 頂端偏移量,定義元素相對於其父元素上邊線的距離 bottom bottom 80px 底部偏移量,定義元素相對與其父元素下邊線的距離 left ...

CSS學習之 定位

如果,說浮動,關鍵在乙個 浮 字上面,那麼 我們的定位,關鍵在於乙個 位 上。css離不開定位,特別是js特效,天天和定位打交道。那麼定位,最常運用的場景再那裡呢?小黃色塊可以再上移動 元素的定位屬性主要包括定位模式和邊偏移兩部分。1 邊偏移 邊偏移屬性 描述top 頂端偏移量,定義元素相對於其父元...

CSS學習之定位

設定為相對定位 relative 的元素會偏移某個距離,元素仍保持其未定位前的形狀,他原本所佔的空間仍然保留 相對定位是乙個非常容易掌握的概念,如果對乙個元素進行相對定位,它將出現在它所在的位置上 然後可以通過設定垂直或者水平位置讓這個元素相對於它的起點進行移動。如果將top 設定為20px,那麼框...