中国有色金属建设股份有限公司网站seo在线外链
今天小编跟大家讲解下有关css怎么设置元素位置不变 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css怎么设置元素位置不变 的相关资料，希望小伙伴们看了有所帮助。
我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置 无论如何滚动滚动条 位置不变 就例如经常看到的弹出广告。方法一般是使用js控制 或者使用css。这里我写的是css的控制方法。
在IE7以上版本及firefox、opera、safari里 都支持css属性"position:fixed" 它的作用就是将元素相对于窗口固定位置。代码如下#ads{
position:fixed;
right:0;
bottom:0;
border:1px solid red;
width:300px;
height:250px;
}
我们定义一个#ads的id样式 并给他设了高度宽度 通过position:fixed以及right、bottom将元素定位在窗口右下角。
使用position:fixed可以直接以浏览器窗口作为参考进行定位 它是浮动在页面中 元素位置不会随浏览器窗口的滚动条滚动而变化；除非你在屏幕中移动浏览器窗口的屏幕位置 或改变浏览器窗口的显示大小 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置 不会受文档流动影响。
但是在IE6下 并不支持position:fixed属性 这个时候我们需要对IE6进行hack处理。解决的方案是使用 postion:absolute属性 它的作用大家都很熟悉 相对于父元素进行绝对定位 然后我们可以通过expression来改变#ads的top 值。
PS expression的定义：IE5及其以后版本支持在css中使用expression 用来把css属性和Javas cript 表达式关联起来 这里的css属性可以是元素固有的属性 也可以是自定义属性。就是说css属性后面可以是一段Javas cript表达式 css属性 的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法 也可以使用其他浏览器对象。这个表达式就好像是在这个 元素的一个成员函数中一样。
所以我们可以通过在css里计算JavaScript值来改变top值 代码如下：#ads{
_position:absolute;
_top:expression(documentElement.scrollTop +
documentElement.clientHeight-this.offsetHeight);
}
似乎一切都完美了 但是我们在IE6下运行的时候会发现 随着滚动条的移动 我们的这个#ads朋友他会抖动。解决方法也很简单 只要在body里加一点点的css 如下：body{
background-image:url(about:blank); /* for IE6 */
background-attachment:fixed; /*必须*/
}
好啦 完工！！！！！！！！！！！！！！！！！！！！！！！！
PS:原本使用的是"url(text.txt)",但是txt这个是不存在的 http请求报404错误 导致影响加载速度 参考了网上的一些写法 使用about:blank可以达到相同目的。
原理据说是ie6不支持fixed 而其样式背景却支持fixed 通过背景来此消彼长消除抖动 望大牛指教。
完整的代码：body{
background-image:url(about:blank); /* for IE6 */
background-attachment:fixed; /*必须*/
}
#ads{
width:300px;
height:250px;
position:fixed;
right:0;
bottom:0;
_position:absolute;
_top:expression(documentElement.scrollTop +
documentElement.clientHeight-this.offsetHeight);
border:1px solid red;
}
来源：爱蒂网
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。