300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > ie自带css定位 CSS实现元素相对于浏览器窗口进行定位_css

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

时间:2018-12-14 12:40:29

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。