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中插入:
<!--[if IE lt 7]> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <![endif]-->
在style.css样式表中针对目标定位元素样式中写入:
position:absolute; top:expression(eval(document.body.scrollTop + 50));
防止滚动条滚动时的闪动,需要定义HTMl的属性为:
html { background-image: url(about: blank); /*用浏览器空白页面作为背景*/ background-attachment: fixed; /*确保滚动条滚动时,元素不闪动*/ }
在 IE 中特有的 CSS 运算符 expression中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。
(2)利用容器对溢出内容的处理方式来实现
定义body内外边距为0,实现html和浏览器窗口相同大小,使body出现滚动条,元素相对于html相对定位。
body { padding: 0; margin: 0; } html { overflow: hidden; } body { height: 100%; overflow: auto; }
针对IE6定义元素属性:
position: absolute; top: 50% ; left: 50% ; margin-top: -140px; margin-left: -168px;
让元素固定于浏览器
分别让元素定位于浏览器左侧、右侧、顶部、底部综合样式演示:
position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop));/* IE6 头部固定 */
position:absolute; right:auto; left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||0));/* IE6 固定右侧 */
position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));/* IE6 固定底部 */
position:absolute; right:auto; left:expression(eval(document.documentElement.scrollLeft));/* IE6 左侧固定 */
相关推荐
纯CSS实现跨浏览器固定定位! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题
1. 结合fullpage.js实现全屏滚动 2. CSS中linear-gradient() 函数用于创建一个线性渐变的 "图像"。 3. 背靠背效果: 4. 圆环旋转效果 5. 落空效果
别具光芒——CSS属性、浏览器兼容
纯css实现兼容各浏览器的颜色线性渐变,对角渐变,渐变角度设置,线性渐变透明度,及渐变方向、隔行变色等,支持设置结点渐变的效果。
可以用CSS实现在新窗口打开链接吗? 我们可以通过css的expression来定义某一部分链接以target="_blank"新窗口打开。需要注意的是:expression是在css中嵌入javascript语句执行了target="_blank",对IE5及更高版本的...
让css在所有浏览器下兼容 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: ...........
浏览器.css 这提供了在浏览器窗口中精美呈现网页所需的 SCSS 或 CSS。 通常,这包括使用照片编辑软件在浏览器窗口、手机等中放置屏幕截图。 然而,我喜欢像瘟疫一样避开 Photoshop,所以我炮制了一个 CSS/HTML 解决...
div+css实现弹出窗口背景变暗效果 div+css实现弹出窗口
css学习《CSS设计彻底研究》 课件详细讲解 css基础入门
CSS相对定位和绝对定位,让你轻松了解css的定位知识和相关的内容
CSS种针对浏览器兼容问题的解决方法,平时收集到的一些,希望对大家有所帮助
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
4.2.2 relative(相对定位) 4.2.3 absolute(绝对定位) 4.2.4 fixed(固定定位) 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第 6章 链接...
jQuery css3猎豹浏览器宽屏banner焦点图切换代码
-通常情况下,浏览器会给元素设置一些默认样式 -默认样式的存在会影响页面的布局 -通常情况下编写网页时需要去除浏览器的默认样式 重置样式表 :专门用来对浏览器的样式进行重置 reset:直接取消了浏览器的默认...
css safari浏览器识别CSS hack.docx
《CSS设计彻底研究》在透彻地讲解CSS核心技术的基础上,深入到各个实际应用领域中,充分向读者演示了如何使用CSS的各项技术,实现令人眩目的网页布局和效果。《CSS设计彻底研究》适合需要使用CSS的Web设计人员和开发...
CSS+Js定位与相对定位