CSS中的相對定位,絕對定位

2021-10-03 02:36:53 字數 720 閱讀 6742

定位是我們做乙個網頁的時候經常用到的,有時候會用到相對定位,有時候會用到絕對定位,有時候會用到固定定位。最開始我剛接觸定位的時候,我就學的不是很明白,在這裡我打算好好寫一下css定位,方便我在記憶一遍,順便將來忘記的時候方便我回憶。

相對定位就是針對元素本身的位置進行偏移,比如原本元素在頁面中間,你給他相對定位,並給了左偏移量為100px的話,他就會向當前位置的右邊偏移100px(左偏移量是向右偏移),為了方便理解我舉個例子:

效果展示

給它乙個相對對位後的css**

.itself
我們就可以看到這個塊向右移動了100px

效果展示

絕對定位就是針對元素父容器的位置進行偏移(父容器需要給乙個相對定位),比如原本元素在頁面中間,你給他絕對定位,位置是左偏移0上偏移0,他就會跑到父容器的左上角,**如下:

效果展示

CSS相對定位絕對定位

absolute 絕對定位 一共有四個屬性值 top right bottom left position absolute top 20px 絕對定位的參考點就是他的父級。同理,如果父級沒有定位屬性,就查詢他的爺爺級.relative 相對定位相對定位與絕對定位結合使用 通常情況下,在對元素設定絕...

css的相對定位 絕對定位

相對定位 relative 絕對定位 absolute 相對定位 relative 相對於原來位置移動,元素設定此屬性之後仍然處在文件流中,不影響其他元素的布局 絕對定位 absolute 1.在父元素沒有設定相對定位或絕對定位的情況下,元素相對於根元素定位 即html元素 是父元素沒有 2.父元素...

css 中相對定位和絕對定位

1.css中定位機制有三種 標準文件流,浮動,絕對定位 2.絕對定位就屬於第三種定位,用到position屬性,下面就是具體設定 相對定位 相對於自身原有位置 就是普通流的時候 進行偏移 設定top,left.後 仍然處於標準文件流中 隨即擁有偏移屬性和z index屬性 絕對定位 建立了以包含塊為...