定位的四種模式: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>1.相对定位</title> <style> .box1 { width:200px; height: 200px; background-color: lightskyblue; position: relative; top:0; left:200px; } .box2 { width:200px; height: 200px; background-color: lightgreen; /*position: static;*/ } .box3 { width:200px; height: 200px; background-color: lightcoral; /*珊瑚色*/ /*position: static;*/ /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/ position:relative; top: -200px; left: 400px; } .box4 { width:200px; height: 200px; background-color: brown; /*position: static;*/ /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/ position:relative; top: -200px; left: 200px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
以上是css相對定位的詳細內容。更多資訊請關注PHP中文網其他相關文章!