css如何固定住元素不变


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在css中,可利用position属性让元素固定不变;只需要给元素添加“position:fixed”样式,进行固定定位即可。固定定位相对于窗口进行定位,无论是否移动滑动条,都固定在相对于窗口的固定位置;其他元素在位置排布上将会忽略其存在。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

1

2

3

4

5

6

7

8

#ads{

    position:fixed;

    right:0;

    bottom:0;

    border:1px solid red;

    width:300px;

    height:250px;

}

我们定义一个#ads的id样式,并给他设了高度宽度,通过position:fixed以及right、bottom将元素定位在窗口右下角。

但是在IE6下,并不支持position:fixed属性,这个时候我们需要对IE6进行hack处理。解决的方案是使用 postion:absolute属性,它的作用大家都很熟悉,相对于父元素进行绝对定位,然后我们可以通过expression来改变#ads的top 值。

expression的定义:IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript 表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性 的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

阅读剩余部分

相关阅读 >>

详谈css的flex布局(图文介绍)

css nav 是什么意思

css中link和import的区别是什么

css counter-reset属性怎么用

在线演示一个全屏切换效果实例

css中词语间隔怎么设置

怎么保存css样式

16 个css开发中需要了解的devtools技巧

css有哪几类样式

css li的点怎么去掉

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...