固定定位
阿新 • • 發佈：2022-03-25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> #div1 { width: 1000px; height: 500px; border: 1px black solid; } #div2 { width: 100px; height: 100px; background-color: aqua; } #div3 { width: 100px; height: 100px; background-color: rebeccapurple; position: relative; top: 10px; left: 10px; } #div4 { width: 100px; height: 100px; background-color: pink; position: absolute; top: 100px; left: 100px; } #div5 { width: 100px; height: 100px; background-color: chartreuse; position: fixed; left: 200px; right: 200px; } </style> <body> <div id="div1"> <div id="div2">我是div</div> <div id="div3">我是相對定位</div> <div id="div4">我是絕對定位</div> <div id="div5">我是固定定位</div> </div> </body> </html>
固定定位永遠都會相對於瀏覽器視窗進行定位
固定定位會固定在瀏覽器視窗的某個位置，不會隨著滾動條滾動