<!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: 0; top: 0; } .box3{ width: 200px; height: 200px; background-color: yellowgreen } </style> </head> <body> <div class="box1"></div> <div class="box4" style="width: 300px; height: 300px; background-color: orange;"> <div class="box2"></div> </div> <div class="box3"></div> < </body> </html>
当元素的position属性设置fixed时,开启了元素的固定定位
固定定位也是一种绝对定位,大部分特点与绝对定位相同
不同的是:
固定定位永远都会相对于浏览器窗口进行定位
IE6不支持固定定位