定位的四個位置: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>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
