`

position:fixed

阅读更多
Position属性有四个可选值,它们分别是:staticabsolutefixedrelative。我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。

position:static 无定位
该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
如:#nav { position:static; }

其他两种前面提过,我们 主要说的是fixed

position:fixed 相对于窗口的固定定位

这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。
请特别注意,IE6不支持CSS中的position:fixed属性。真的非常遗憾,要不然我们就可以试试这种酷酷的效果了。


参见页面:
www.cssplay.co.uk/layouts/fixed.html#bites
分享到:
评论
1 楼 linkaisheng 2010-03-13  
IE6下有相应的解决方法的

相关推荐

    IE6实现position:fixed bug (固定窗口方法)的实例

    这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...

    position:fixed;实现底层页面不跟随浮层模块滚动

    position:fixed;实现底层页面不跟随浮层模块滚动

    IE6下的纯CSS完美position:fixed实现

    在互联网早期,Internet Explorer 6 (IE6) 是一个广泛使用的浏览器,但它的CSS支持并不完善,特别是对于`position: fixed`属性。`position: fixed`在现代浏览器中用于创建固定定位元素,使得元素相对于视口...

    position:fixed在ie6的使用

    `position:fixed`是一个非常重要的CSS属性,它使得元素在页面上保持固定的位置,不随滚动条滚动,常用于创建固定顶部导航、侧边栏等。然而,在Internet Explorer 6(简称IE6)这个古老且具有很多兼容性问题的浏览器...

    详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

    iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...

    跨浏览器的实践:position:fixed 层的固定定位

    `position: fixed` 是 CSS 中的一个定位属性,用于实现这种效果。然而,由于不同浏览器之间的兼容性问题,使用 `position: fixed` 时可能会遇到一些挑战,特别是在老旧的浏览器如 Internet Explorer 6 中。 在给定...

    微信小程序----position:sticky

    在微信小程序开发中,`position:sticky` 是一个非常实用的CSS样式,它结合了`position:relative`和`position:fixed`的特点,用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置,从而...

    使用CSS样式position:fixed水平滚动的方法

    $('#rightsider').scrollFixed({fixed:'right'}); ``` 这段代码分别对ID为`leftsider`和`rightsider`的元素应用了插件,设置它们分别固定在浏览器的左侧和右侧,且在水平滚动时跟随。 总结来说,通过结合CSS的`...

    position_fixed

    在网页设计和开发中,`position: fixed;` 是一个非常重要的CSS属性,它用于创建元素的固定定位。这个属性让元素相对于浏览器窗口保持固定的位置,即使页面滚动,该元素也会始终保持在屏幕上的同一位置。标题...

    css中position:fixed实现div居中上下左右居中

    本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先,了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位,这意味着无论页面如何滚动,元素都将保持在...

    CSS 同级元素position:fixed和margin-top共同使用的问题

    在网页设计中,CSS的定位属性position: fixed经常被用来创建固定在页面上的元素,如顶部导航栏。而margin属性则用来给元素添加外边距。当这两个属性共同作用于同级元素时,可能会遇到一些布局上的问题。本文探讨了在...

    仿Lightbox效果(Windows关机效果),div覆盖,锁定页面及IE 6实现position:fixed;

    由于IE6不完全支持CSS的`position: fixed`,开发者通常需要使用JavaScript库如jQuery或特定的CSS hack来模拟固定定位的效果,以确保在旧版浏览器中也能正常显示。 在这个压缩包中包含的"lightbox测试.html"文件可能...

    javascript ie6兼容position:fixed实现思路

    在网页设计中,`position:fixed` 是一种CSS定位方式,它允许元素相对于浏览器窗口进行定位,而不是相对于其父元素。这种定位模式在创建固定头部、侧边栏或浮动导航栏时非常有用,因为无论用户如何滚动页面,这些元素...

    IE6支持position:fixed完美解决方法

    在Web开发中,`position:fixed`是一个非常有用的CSS属性,它允许元素相对于浏览器窗口定位,即使在滚动页面时,元素也会保持在屏幕的固定位置。然而,这个特性在Internet Explorer 6 (IE6)中并不原生支持,导致...

    JS 滚动事件[removed]与position:fixed写兼容IE6的回到顶部组件

    在本文中,我们将探讨如何利用JavaScript的滚动事件`window.onscroll`以及CSS中的`position:fixed`属性来创建一个兼容IE6的“回到顶部”组件。首先,我们需要理解这两个关键概念。 `window.onscroll`事件是...

    CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题

    本篇文章将重点讨论在使用`fixed`定位时只指定`position: fixed`而忽略边位移所引发的问题。 首先,我们需要理解定位的基础概念。定位模式`position`决定元素如何相对于其正常流中的位置进行定位。默认情况下,所有...

    css中position:fixed实现div在窗口上下左右居中

    通过position属性,我们可以控制元素的位置关系,常见的定位属性值包括static、relative、absolute和fixed等。其中,position:fixed是一种特殊的定位方式,它可以使元素相对于浏览器窗口进行定位,而与文档流无关,...

    解决iframe中fixed失效的问题

    然而,当我们在 `iframe` 内部使用 `position: fixed;` 属性时,可能会遇到一些问题,即 `fixed` 定位在某些情况下可能失效。这通常与浏览器的渲染机制和 `iframe` 的跨域限制有关。本文将深入探讨这个问题,并提供...

    position:fixed或absolute时百分比参考屏幕宽度

    当使用position:fixed或position:absolute的时候,元素的定位将会脱离常规文档流,而此时如何设置元素的宽度和位置就变得稍微有点不同。通常情况下,元素的宽度和位置是相对于其父元素进行定位的。但是当元素的定位...

    使用position:fixed属性让DIV居中

    下面与大家分享下使用position:fixed属性让DIV居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto,感兴趣的朋友可以参考下哈

Global site tag (gtag.js) - Google Analytics