溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS中position的四個屬性分別是什么，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
CSS position屬性
總共有四個屬性：
static
默認值，正常情況下就是這個屬性，一般不用寫。
relative
使元素偏移，使用top,right,left,bottom進行偏移，用z-index分別層次。
<head>
<style>
div{
float: left;
width: 100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
margin-left: 10px;
}
.box{
position: relative;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div>1</div>
<div class="box">2</div>
<div>3</div>
</body>
relative是在自己原來的基礎(chǔ)上進行偏移。也就是相對于自己定位。
absolute
相對于body或相對于離自己最近已定位的父元素定位。
<head>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 100px;
left: 250px;
}
.box2{
width: 200px;
height: 200px;
background: pink;
position: relative;
top: 10px;
}
.box3{
width: 100px;
height: 100px;
background: blue;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">
2 <div class="box3">3</div>
</div>
</body>fixed
固定定位指定是 一直按照瀏覽器的窗口左上方進行定位的。無論鼠標怎么滾都按照你移動后瀏覽器窗口的左上方進行定位。 像很多官網(wǎng)的導(dǎo)航欄就用了固定定位，讓它一直在頂部感受巔峰的孤獨。
注意：這三種定位都會脫離文檔流，用法要恰當！
看完了這篇文章，相信你對“CSS中position的四個屬性分別是什么”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
