定位的四個位置: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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
