定位的四個位置:left,right,top,bottom
定位屬性:position,有四種狀態值
1.static:靜態定位,按元素在文檔流中的順序排列,這是預設值,四個位置無效
2.relative:相對定位,元素相對於原來它在文檔流中的位置進行定位,四個位置有效
3.absolute:絕對位置,元素相對於它的定位父級定位,脫離文檔流,四個位置有效
4.fixed:固定定位,與絕對位置類類似,也脫離了文檔流,元素在頁面上的位置固定,不隨頁面滾動,四個位置有效
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>4.固定定位</title> <style> body { /*將頁面高度設定為2000px,使之出現垂直捲軸*/ height:2000px; } .box { width: 200px; height: 260px; /*background-color: #6CF;*/ /*固定定位fixed:元素脫離文檔流,相對於視窗定位,固定在頁面上,並且不隨頁面滾動*/ /*可以當作是絕對位置的一個特例來看待*/ position:fixed; top: 200px; left:50px; } </style></head><body><!--<div></div>--><!--以線上QQ客服為例進行示範--><div><img src="../images/qq.png" alt="" width="200"></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
