Position属性有四个可选值,它们分别是:
static、
absolute、
fixed、
relative。我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。
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
分享到:
相关推荐
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
position:fixed;实现底层页面不跟随浮层模块滚动
在互联网早期,Internet Explorer 6 (IE6) 是一个广泛使用的浏览器,但它的CSS支持并不完善,特别是对于`position: fixed`属性。`position: fixed`在现代浏览器中用于创建固定定位元素,使得元素相对于视口...
`position:fixed`是一个非常重要的CSS属性,它使得元素在页面上保持固定的位置,不随滚动条滚动,常用于创建固定顶部导航、侧边栏等。然而,在Internet Explorer 6(简称IE6)这个古老且具有很多兼容性问题的浏览器...
iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
`position: fixed` 是 CSS 中的一个定位属性,用于实现这种效果。然而,由于不同浏览器之间的兼容性问题,使用 `position: fixed` 时可能会遇到一些挑战,特别是在老旧的浏览器如 Internet Explorer 6 中。 在给定...
在微信小程序开发中,`position:sticky` 是一个非常实用的CSS样式,它结合了`position:relative`和`position:fixed`的特点,用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置,从而...
$('#rightsider').scrollFixed({fixed:'right'}); ``` 这段代码分别对ID为`leftsider`和`rightsider`的元素应用了插件,设置它们分别固定在浏览器的左侧和右侧,且在水平滚动时跟随。 总结来说,通过结合CSS的`...
在网页设计和开发中,`position: fixed;` 是一个非常重要的CSS属性,它用于创建元素的固定定位。这个属性让元素相对于浏览器窗口保持固定的位置,即使页面滚动,该元素也会始终保持在屏幕上的同一位置。标题...
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先,了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位,这意味着无论页面如何滚动,元素都将保持在...
在网页设计中,CSS的定位属性position: fixed经常被用来创建固定在页面上的元素,如顶部导航栏。而margin属性则用来给元素添加外边距。当这两个属性共同作用于同级元素时,可能会遇到一些布局上的问题。本文探讨了在...
由于IE6不完全支持CSS的`position: fixed`,开发者通常需要使用JavaScript库如jQuery或特定的CSS hack来模拟固定定位的效果,以确保在旧版浏览器中也能正常显示。 在这个压缩包中包含的"lightbox测试.html"文件可能...
在网页设计中,`position:fixed` 是一种CSS定位方式,它允许元素相对于浏览器窗口进行定位,而不是相对于其父元素。这种定位模式在创建固定头部、侧边栏或浮动导航栏时非常有用,因为无论用户如何滚动页面,这些元素...
在Web开发中,`position:fixed`是一个非常有用的CSS属性,它允许元素相对于浏览器窗口定位,即使在滚动页面时,元素也会保持在屏幕的固定位置。然而,这个特性在Internet Explorer 6 (IE6)中并不原生支持,导致...
在本文中,我们将探讨如何利用JavaScript的滚动事件`window.onscroll`以及CSS中的`position:fixed`属性来创建一个兼容IE6的“回到顶部”组件。首先,我们需要理解这两个关键概念。 `window.onscroll`事件是...
本篇文章将重点讨论在使用`fixed`定位时只指定`position: fixed`而忽略边位移所引发的问题。 首先,我们需要理解定位的基础概念。定位模式`position`决定元素如何相对于其正常流中的位置进行定位。默认情况下,所有...
通过position属性,我们可以控制元素的位置关系,常见的定位属性值包括static、relative、absolute和fixed等。其中,position:fixed是一种特殊的定位方式,它可以使元素相对于浏览器窗口进行定位,而与文档流无关,...
然而,当我们在 `iframe` 内部使用 `position: fixed;` 属性时,可能会遇到一些问题,即 `fixed` 定位在某些情况下可能失效。这通常与浏览器的渲染机制和 `iframe` 的跨域限制有关。本文将深入探讨这个问题,并提供...
当使用position:fixed或position:absolute的时候,元素的定位将会脱离常规文档流,而此时如何设置元素的宽度和位置就变得稍微有点不同。通常情况下,元素的宽度和位置是相对于其父元素进行定位的。但是当元素的定位...
下面与大家分享下使用position:fixed属性让DIV居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto,感兴趣的朋友可以参考下哈