CSS定位之固定定位
2017-07-22 15:55
288 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: yellow; /* * 当position元素为fixed时,开启了固定定位 * 固定定位也是一种绝对定位,大部分特点和绝对定位一样, * 不同的是 * 固定定位永远都会相对于浏览器窗口定位的 * 固定定位会固定在窗口的某一个位置,不会随窗口的移动而移动 */ position: fixed; left: 0px; top: 0px; } .box3{ width: 100px; height: 100px; background-color: yellowgreen; } </style> </head> <body style="height: 5000px;"> <div class="box1"></div> <div class="box4" style="height: 200px;width: 200px; background-color: olive; position: relative;"> <div class="box2"></div> </div> <div class="box3"></div> </body> </html>
效果:
相关文章推荐
- css定位(相对定位、绝对定位、固定定位)
- 完美解决IE6浏览器下不兼容position:fixed固定定位
- 层模型--固定定位(参考医院网站底部提示框)
- 相对定位和绝对定位以及固定定位
- jQuery导航条固定定位效果实例代码
- 纯CSS实现左侧伸缩固定和头部固定布局 之 css布局定位再学习
- 跨浏览器的CSS固定定位{position:fixed}
- 跨浏览器的CSS固定定位{position:fixed}
- 解决 IE6 position:fixed 固定定位问题
- 关于CSS在浏览器中固定定位position:fixed的应用
- css复习——opacity(不透明度)、IE6固定定位、border-radius(圆角)
- bootstrap(手风琴、图片轮换和固定定位)
- CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位
- Fullpage.js固定导航栏-实现定位导航栏
- 利用绝对定位实现两列右边固定宽度左边自适应布局
- 解决 IE6 position:fixed 固定定位问题
- 解决 IE6 position:fixed 固定定位问题
- 理解CSS相对定位和固定定位
- 解决ie6下不支持fix属性,模拟固定定位
- 层模型--固定定位(参考医院网站底部提示框)