ie自带css定位,CSS实现元素相对于浏览器窗口进行定位_css

文章简介：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