在 CSS 中可以使用固定定位 (position:fixed;) 来固定元素的位置. 下面本篇文章就来给大家介绍一下固定定位(position:fixed;), 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 定位主要有四种, 静态定位, 相对定位, 绝对定位和固定定位. 其中静态定位这个是元素的默认定位方式, 不能使用 top,bottom,left,right 和 z-index 属性, 其它三种定位可以使用以上几个属性. 我们这里主要介绍固定定位.
固定定位(position:fixed;)
fixed 生成固定定位元素, 元素脱离文档流, 不占据文档流的位置, 可以理解为漂浮在文档流的上方, 相对于浏览器窗口进行定位.
如果想为元素设置层模型中的固定定位, 需要设置 position:fixed;, 直接以浏览器窗口作为参考进行定位, 它是浮动在页面中, 元素位置不会随浏览器窗口的滚动条滚动而变化, 除非你在屏幕中移动浏览器窗口的屏幕位置, 或改变浏览器窗口的显示大小, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置, 不会受文档流动影响.
比如我们准备一长串的文字, 让文字超出一屏的宽度, 设置浮动元素 div1 的 left 和 top 为 100px, 拖动浏览器的滚动条, 浮动元素 div1 的位置不会发生变化.
具体代码和展示效果如下图所示:
来源: http://www.css88.com/qa/css3/14599.html