定位屬性：Position

作用：檢索或者設置元素的定位方式“(改變元素位置)

定位的步驟：

1.給元素添加position屬性 證明該元素要做位置變

2.確定參照物！(通過position的屬性值來確定 )

3.確定坐標 left right top bottom

Position的屬性值：

1.static 靜態定位：

(1) Position的默認值，默認文本流的狀態。

不會識別 left right top bottom指定的坐標。

(2)Absolute 絕對定位：

①參照物：按照已經有定位的父元素進行位置的變化。

(例：藍色div為子元素 粉色div為父元素 給父元素添加定位 設置為參照物 然后子元素以父元素為參照物 來改變位置)

②假如當前元素沒有父元素 或者 父元素沒有定位的情況下 以整個文檔為參照物(整個網頁)

(同上 此時的父元素就是整個網頁！！！)

③絕對定位會脫離文檔流，不占據空間

例：

此時子元素(藍色div)在父元素(粉色div)的默認位置 即左上角

現在給粉色div添加position：absolute；形成參照物

再給藍色div添加 position：absolute；

right：0；bottom：0；

即 讓子元素到離父元素右邊0px距離的位置 底部0px距離的位置 (右下角)

添加定位后

此時

藍色div跑到父元素的右下角了。

實現代碼如下：

.box1{

width: 800px;

height: 500px;

background: pink;

margin: 100px auto;

position: absolute;

}

.demo{

height: 200px;

width: 200px;

background: skyblue;

position: absolute;

right: 0;

bottom: 0;

}

2.relative 相對定位：

參照物：自身默認的位置！！！

始終占據空間，不會破壞文檔流

例：

給藍色div添加定位屬性：position:relative;(即形成并以自身為參照物)

定位前：

定位后：

position:relative;

加一個left：20px;top:20px;(指定位后的div 距離div初始的位置的左邊20px的距離，頂端20px的距離)

注：此時參照物是自身 位置的移動是相對于自身之前的位置而言！！！

實現代碼：

.box1{

width: 800px;

height: 500px;

background: pink;

margin: 100px auto;

position: relative;

}

.demo{

height: 200px;

width: 200px;

background: skyblue;

position: absolute;

left:20px ;

top: 20px;

}

包含塊的設置：

1.如果父元素為參照物：添加position：relative；

2.給要做定位的子元素添加position：absolute;

定位的順序問題：

后定位的元素會把前定位的元素 蓋住！

z-index:

控制定位元素的層次關系

屬性值為一個數字(可以為復數)， 數字越大 層次關系越高。

(類似于數字越大權重就越大！！！)

weixin_44390390

發布了1 篇原創文章 · 獲贊 0 · 訪問量 23

私信

關注

標簽：定位,參照物,元素,20px,HTML,position,嘿嘿嘿,div,CSS

來源： https://blog.csdn.net/weixin_44390390/article/details/104486525

總結

以上是生活随笔為你收集整理的html定位的所有属性,HTML CSS定位属性详解 嘿嘿嘿的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。