今天小编给大家分享的是css怎么实现元素不随滚动条滚动,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
css中可以使用position属性设置元素不随滚动条滚动,语法“position:fixed”。position属性规定元素的定位类型,当值为fixed时,元素以相对浏览器窗口进行定位,无论怎样移动滑动条,都会固定在浏览器窗口的同一位置。
在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。
fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
固定定位的元素以相对浏览器窗口为基准进行定位的,无论怎样移动你的滑动条,它都会固定在相对于浏览器窗口的固定位置,另外要注意,它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top,bottom,left,right也是相对于浏览器窗口而言的。
示例:
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
布偶猫
效果图:
从上面的示例看出:可以使用position: fixed来固定图片位置不变,让图片位置可以不随着文字的拖动而改变图片位置。
注:
在IE7以上版本及firefox、opera、safari里,都支持css属性"position:fixed",它的作用就是将元素相对于窗口固定位置。
但是在IE6下,并不支持position:fixed属性,这个时候我们需要对IE6进行hack处理。
关于css怎么实现元素不随滚动条滚动就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。
上一篇: 简单的创建数据库sql语句分析
下一篇: 数据库的基本特点有哪些?