文章简介:css实现相对浏览器窗口定位彻底研究.
Web Developer / Designer 经常需要将一个元素“固定”在页面的某个位置。例如弹出窗口、漂浮广告位等……本文将详细介绍简单CSS实现元素相对于浏览器窗口进行定位的方法。
position:fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
良好支持 W3C 标准的浏览器实例
在 IE9、Firefox、Chrome等良好支持 W3C 标准的浏览器中,如果我们希望将某元素绝对定位于窗口正中间,我们可以给它指派这样的 CSS样式:
width:336px; height:280px; left:50%; top:50%; margin-left:-168px; margin-top:-140px; position:fixed;
这里 margin-left 、margin-top 的值应该修改为您页面主要区域宽度和高度的一半。
修正IE版本<7不支持position:fixed的bug
IE版本<7的浏览器不支持position:fixed属性,所以并未实现期望的效果,这时就要针对IE<7的浏览器写单独的样式。
(1)利用 JavaScript 计算出需要的 top 值
在head中插入:
在style.css样式表中针对目标定位元素样式中写入:
position