纯CSS实现固定定位position:fixed（兼容IE6）

最新推荐文章于 2021-08-04 00:37:39 发布

王爷的大房子

最新推荐文章于 2021-08-04 00:37:39 发布

阅读量136

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/daxiong/articles/3330352.html

版权

网页中我们经常遇到一些固定在页面中某个位置的返回顶部、分享等小按钮，它不会跟随滚动条改变位置。如下图：

CSS实现固定定位最简便的是position:fixed;但是IE6不支持fixed，要实现IE6下的固定定位方法有多种，比如通过js、css表达式，这里分享一种纯CSS的解决方法。

原理：把需要固定定位的元素相对于html定位，并保证html不产生滚动条，然后把body的高度设置为窗口的高度，内容溢出时body产生滚动条，这样在视觉上元素始终保持在浏览器窗口的固定位置。

具体实现代码如下，供参考：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>纯CSS实现固定定位position:fixed（兼容IE6）</title>
 6 </head>
 7 <style type="text/css">
 8 * {
 9     margin: 0;
10     padding: 0;
11 }
12 .wrap {
13     width: 960px;
14     height: 1500px;
15     border: 1px dashed #666;
16     background: #FCF;
17     margin: 0 auto;
18 }
19 .upBtn {
20     width: 100px;
21     height: 100px;
22     border: 1px dashed #f00;
23     background: #06F;
24     position: fixed;
25     right: 0;
26     bottom: 0;
27 }
28 html, body {
29     _height: 100%;/*浏览器窗口高度*/
30 }
31 html {
32     _overflow: hidden;/*避免html产生滚动条*/
33 }
34 body {
35     _overflow: auto;/*body内容溢出产生滚动条*/
36 }
37 .upBtn {
38     _position: absolute;
39     _right: 17px;/*upBtn相对于html定位的，避免覆盖body产生的滚动条*/
40 }
41 </style>
42 <body>
43 <div class="wrap">
44   <p>跨浏览器css固定定位position:fixed;</p>
45 </div>
46 <div class="upBtn">返回顶部</div>
47 </body>
48 </html>

转载于:https://www.cnblogs.com/daxiong/articles/3330352.html

王爷的大房子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现固定定位position:fixed（兼容IE6）

网页中我们经常遇到一些固定在页面中某个位置的返回顶部、分享等小按钮，它不会跟随滚动条改变位置。如下图：CSS实现固定定位最简便的是position:fixed;但是IE6不支持fixed，要实现IE6下的固定定位方法有多种，比如通过js、css表达式，这里分享一种纯CSS的解决方法。原理：把需要固定定位的元素相对于html定位，并保证html不产生滚动条，然后把body的高度设置为窗口...
复制链接

扫一扫