html定位的所有属性,HTML CSS定位属性详解 嘿嘿嘿
定位屬性: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定位属性详解 嘿嘿嘿的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java中asl_带你认识绕不开的ASL
- 下一篇: 酒店管理与计算机技术结合,(定稿)某酒店