首页 > 代码库 > 解决ie6下不支持fix属性，模拟固定定位
解决ie6下不支持fix属性，模拟固定定位
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>模拟固定定位fix</title> 6 <style> 7 html{ height:100%; overflow:hidden;} 8 body{margin:0; height:100%; overflow:auto;} 9 .box{height:2000px;}10 .div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}11 </style>12 </head>13 <body>14 <div class="box">15 <div class="div"></div>16 </div>17 </body>18 </html>
html{ height:100%; overflow:hidden;}//此处让其跟文档height一样
body{margin:0; height:100%; overflow:auto;}//此处也是让其跟html元素的height一样，相对html元素
.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}//此处用了绝对定位，而此处的定位是相对文档的，当滚动条滚动的时候自然这里，没有相对html滚动，从而达到固定定位fix遮掩的效果（兼容性很好）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{height:2000px;} 8 .div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100)); 9 }10 </style>11 </head>12 <body>13 <div class="box">14 <div class="div"></div>15 </div>16 </body>17 </html>
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100)); 这里针对的ie6以下不支持fix属性，来模拟的。性能不是很好
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>图片块中居中</title> 6 <style> 7 .box{ width:800px;height:600px;border:2px solid #000; text-align:center;} 8 span{ display:inline-block; height:100%; vertical-align:middle;} 9 img{ vertical-align:middle;}10 </style>11 </head>12 <body>13 <div class="box">14 <img src="bigptr.jpg" /><span></span>15 </div>16 </body>17 </html>
图片块中居中，这种方式兼容性很好，语法也简单
1 <style>2 .box{ width:800px;height:600px;border:2px solid #000;display:table;position:relative; overflow:hidden;}3 span{ display:table-cell; text-align:center; vertical-align:middle;*position:absolute;left:50%;top:50%;}4 img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}5 </style>
这种方式没有上面的好用。不推荐
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉 6 </title> 7 <style> 8 .list{width:302px; margin:0;padding:0; list-style:none;} 9 li{ height:30px; font-size:12px; line-height:30px;border:1px solid #000; vertical-align:top;}10 p{margin:0;float:left;padding-right:50px; position:relative; overflow:hidden;height:30px;}11 span{padding-left:10px;width:40px; position:absolute;right:0;top:0;}12 </style>13 </head>14 <body>15 <ul class="list">16 <li>17 <p>18 <a href="#">文字文字文字文字文字字文字文字文字文字文字文字字文字文字文字文字文字文字字文字</a>19 <span>文字</span>20 </p>21 </li>22 <li>23 <p>24 <a href="#">字文字文字字文字</a>25 <span>文字</span>26 </p>27 </li>28 <li>29 <p>30 <a href="#">文文字字文字文字文字文字文字文字字文字</a>31 <span>文字</span>32 </p>33 </li>34 <li>35 <p>36 <a href="#">字文字文字文字字文字</a>37 <span>文字</span>38 </p>39 </li>40 </ul>41 </body>42 </html>
li元素里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉
解决ie6下不支持fix属性，模拟固定定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。