CSS position元素定位 二

2021-09-29 07:29:16 字數 2265 閱讀 5412

語法:

position:absolute

什麼是絕對定位?

絕對定位元素是相對於「祖先定位元素」來進行定位!

什麼是祖先定位元素?

絕對定位元素它會先去查詢其父元素是否設定了定位的屬性,如果有設定位的屬性,那麼它就會相對於其父元素來進行定位;但是如果它的父元素沒有設定定位屬性,那麼他就會去查詢其父元素的上一級元素是否設定了定位的屬性,如果有設定就相對于父元素的上一級元素進行定位,但是如果沒有設定,那麼會繼續嚮往上一級進行查詢,如果其祖先元素沒有設定定位屬性,那麼它就會相對於「瀏覽器視窗」來進行定位!

"box">

"div1">

"div2">

"div3">

**效果如下:

... ...

.div2

... ...

**效果:

特點:

... ...

div它是乙個絕對定位元素,它會去查詢其父元素是否設定了定位的屬性,如果其父元素沒有設定定位的屬性,它就會查詢其父元素的上一級元素是否設定了定位的屬性,但是它的父元素的上一級就是「body」元素,它就會相對於「body」元素來進行定位

「body」元素就是指的瀏覽器視窗

div2這個元素是絕對定位元素,它會去查詢其父元素是否設定了定位的屬性

box這個元素它有設定了定位的屬性,position:relative;

div2這個元素它會就相對於.box這個元素來進行定位,它就會離.box這個元素的右邊0個畫素,離上邊0個畫素

在這裡我們又加了乙個父元素,設定了一些屬性

我們把上面設定的相對定位放到爺爺元素裡面

... ...

.boxp

... ...

**效果:

div2是乙個絕對定位元素,他先去查詢其父元素是否設定了定位屬性 .box沒有設定定位的屬性,那麼.div2它還會去查詢其父元素的上一級元素是否設定了定位屬性  .boxp這個元素它設定了相對定位屬性,現在.div2它就會相對於.boxp來進行定位

離.boxp這個元素的右邊0個畫素

離.boxp這個元素的上邊0個畫素

我們可以看到當前元素的父元素與爺爺元素都設定了相對定位,那麼它會相對於其父元素來進行定位,也就是說當絕對定位元素查詢到了其祖先元素已經設定了定位的屬性就不會再去查詢上一級元素

這兩篇是css的三種position元素定位,我們已經學習完了,請大家多多練習,多多記憶

css position塊級元素定位

寫定位方式 使用top right bottom left 四個方向屬性進行正負操作 z index層級的使用,必須要先使用定位才可以使用該屬性 絕對定位和相對定位 子絕父相固定定位 可將指定內容固定在頁面的某一處,如右下角的各種廣告,隨便頁面怎樣滑動,該內容不動 定義乙個巢狀的div class ...

html 定位 CSS Position定位

說明position 屬性指定了元素的定位型別。position 屬性的五個值 元素可以使用的頂部,底部,左側和右側屬性定位。所有的css定位屬性 bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。值 clip 剪輯乙個絕對定位的元素 cursor 顯示游標移動到指定的型別 lef...

css position 相對定位

html head style type text css h2.pos left h2.pos right style head body h2 這是位於正常位置的標題 h2 h2 class pos left 這個標題相對於其正常位置向左移動 h2 h2 class pos right 這個標題...