把box2設為固定定位: 輸出:固定定位永遠都會相對於瀏覽器視窗進行定位; 固定定位會固定在瀏覽器視窗某個位置,不會隨滾動條滾動; ...
把box2設為固定定位:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>定位</title> <style media="screen"> .box1{ width:100px; height: 100px; background-color: rgb(184, 208, 162); } .box2{ width:100px; height: 100px; background-color: rgb(231, 223, 143); position:fixed; left: 100px; top: 100px; } .box3{ width:100px; height: 100px; background-color: rgb(188, 211, 213); } span{ background-color: rgb(209, 198, 209); } </style> </head> <body> <div class="box"> <div class="box1"> </div> <div class="box3"> <div class="box2"> </div> </div> <span>span元素</span> </div> </body> </html>
輸出:固定定位永遠都會相對於瀏覽器視窗進行定位;
固定定位會固定在瀏覽器視窗某個位置,不會隨滾動條滾動;