html如何设置页面位置不变,科技常识：css怎么设置元素位置不变

今天小编跟大家讲解下有关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;

}

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。