css实现网页布局随滚轮变化响应移动
2016-03-22 02:35
531 查看
_position:absolute; _top:expression(eval(document.documentElement.scrollTop));
1、第一句代码
这句代码的意思是“位置:绝对定位”,也就是说元素的位置是相对于整个浏览器窗口的,而不是相对于父元素。一般要配合top、left属性使用。
2、第二句代码
top属性是定义元素的顶部在网页中的位置,而CSS中的expression属性是用来调用Javascript代码。所以expression后面的括号中就是一行Javascript代码。
其中,document.documentElement.scrollTop 的意思是获取当前页面滚动条所滚动到的位置的数值,而再用eval()函数把它计算成数值。
所以这句代码最终的意思就是:你浏览器窗口的滚动条滑到哪,这个元素的位置就在哪。
3、前面的下划线是CSS Hack中的用法,用来区分不同的浏览器以解决兼容问题,此处的下划线只有IE6能识别,而IE7、IE8、Firefox等浏览器是识别不了的,所以这两行代码只对IE6有效,其他浏览器是忽略它们的。
1、第一句代码
_position:absolute;
这句代码的意思是“位置:绝对定位”,也就是说元素的位置是相对于整个浏览器窗口的,而不是相对于父元素。一般要配合top、left属性使用。
2、第二句代码
_top:expression(eval(document.documentElement.scrollTop));
top属性是定义元素的顶部在网页中的位置,而CSS中的expression属性是用来调用Javascript代码。所以expression后面的括号中就是一行Javascript代码。
eval(document.documentElement.scrollTop);
其中,document.documentElement.scrollTop 的意思是获取当前页面滚动条所滚动到的位置的数值,而再用eval()函数把它计算成数值。
所以这句代码最终的意思就是:你浏览器窗口的滚动条滑到哪,这个元素的位置就在哪。
3、前面的下划线是CSS Hack中的用法,用来区分不同的浏览器以解决兼容问题,此处的下划线只有IE6能识别,而IE7、IE8、Firefox等浏览器是识别不了的,所以这两行代码只对IE6有效,其他浏览器是忽略它们的。
相关文章推荐
- 浅谈CSS布局
- CSS3(七)——布局样式
- CSS3(六)——变形与动画
- ActionMode使用及样式配置
- css的学习
- 使用css Flexbox实现垂直居中
- ActionBar样式
- 博客园样式漫谈——从0到1改变你的博客风格!
- CSS的width:100%和width:auto区别
- CSS Sprites
- padding-bottom和 margin-bottom
- gulp教程之gulp-minify-css
- CSS overflow 属性
- css百事可乐
- css3:nth-child(n):
- CSS选择器的兼容性
- css:图标与文字对齐的两种方法
- CSS2系列:外边距合并问题(margincollapse)
- CSS控制LI行字符溢出用省略号取代
- CSS中隐藏内容的3种方法及属性值