定位的四種模式:static,relative,absolute,fixed
定位的四個位置:left,right,top,bottom
定位屬性:position,有四種狀態值
1.static:靜態定位,按元素在文檔流中的順序排列,這是預設值,四個位置無效
2.relative:相對定位,元素相對於原來它在文檔流中的位置進行定位,四個位置有效
3.absolute:絕對定位,元素相對於它的定位父級定位,脫離文檔流,四個位置有效
#4.fixed:固定定位,與絕對定位類別類似,也脫離了文檔流,元素在頁面上的位置固定,不隨頁面滾動,四個位置有效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2.绝对定位</title> <style> /*body {*/ /*border: 1px solid red;*/ /*}*/ .box { width: 600px; height: 600px; background-color: yellow; } .box1 { width:200px; height: 200px; background-color: lightskyblue; position: absolute; top:0; right:0; } .box2 { width:200px; /*width:250px;*/ height: 200px; /*height: 250px;*/ background-color: lightgreen; } .box3 { width:200px; height: 200px; background-color: lightcoral; /*珊瑚色*/ } .box4 { width:200px; height: 200px; background-color: brown; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html>
以上是css絕對定位的詳細內容。更多資訊請關注PHP中文網其他相關文章!