溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS定位中四個屬性的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
CSSposition屬性
總共有四個屬性：
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>
<divclass="box">2</div>
<div>3</div>
</body>
Winston
relative是在自己原來的基礎上進行偏移。也就是相對于自己定位。
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>
<divclass="box1">1</div>
<divclass="box2">
2<divclass="box3">3</div>
</div>
</body>
Winston
fixed
固定定位指定是一直按照瀏覽器的窗口左上方進行定位的。無論鼠標怎么滾都按照你移動后瀏覽器窗口的左上方進行定位。像很多官網的導航欄就用了固定定位，讓它一直在頂部感受巔峰的孤獨。
注意：這三種定位都會脫離文檔流，用法要恰當！
感謝各位的閱讀！關于“CSS定位中四個屬性的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
