前端基礎---固定定位
阿新 • • 發佈：2021-07-02
* 當元素的position屬性設定fixed時，則開啟了元素的固定定位
* 固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣
* 不同的是：
* 固定定位永遠都會相對於瀏覽器視窗進行定位
* 固定定位會固定在瀏覽器視窗某個位置，不會隨滾動條滾動
*
* IE6不支援固定定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; /** 當元素的position屬性設定fixed時，則開啟了元素的固定定位 * 固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣 * 不同的是： * 固定定位永遠都會相對於瀏覽器視窗進行定位 * 固定定位會固定在瀏覽器視窗某個位置，不會隨滾動條滾動 * * IE6不支援固定定位*/ position: fixed; left: 0px; top: 0px; } .box3{ width: 200px; height: 200px; background-color: yellowgreen; } </style> </head> <body style="height: 5000px;"> <div class="box1"></div> <div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;"> <div class="box2"></div> </div> <div class="box3"></div> </body> </html>