尊龙集团官方认证网站
  咨询电话:13582127929

D88尊龙集团官方唯一客户端

css属性position: static|relative|absolute|fixed|sticky简单解析

CSS position属性规定一个元素在文档中的定位类型。top,right,bottomleft属性则决定了该元素的最终位置。

Object.style.position = static | relative | absolute | fixed | sticky

先解释下什么是文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流

static 静态定位(默认)

默认值,元素出现在正常的流中。位置设置为static的元素,它始终处于正常文档流给予的位置,不影响其他元素的偏移。(static 元素会忽略任何 top、bottom、left 、 right 或者 z-index 声明)。

relative 相对定位

位置设置为 relative 的元素,相对于其正常位置进行定位,该元素会在正常文档流中会占据位置,从而不影响其他元素的偏移。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。因此 "left:20px" 会将元素移至元素正常位置左边 20 个像素的位置。

我们用个简单例子分析

正常文档流

<div style="width: 200px; height:200px; background-color:green;"> <div style="width: 100px; height:100px;background-color: #cff;"> 1 </div> <div style="width: 100px; height:100px; background-color: #ccf;"> 2 </div></div>

加了relative之后的布局

<div style="width: 200px; height:200px; background-color:green;"> <div style="width: 100px; height:100px;background-color: #cff; position: relative;top: 10px;left:10px;"> 1 </div> <div style="width: 100px; height:100px; background-color: #ccf;"> 2 </div></div>

加上margin/padding/border之后的布局

记住一点,relative是相对自身定位。加上margin/padding/border之后,是在这些属性起作用之后,再来计算relative。

<div style="width: 200px; height:200px; background-color:green;"> <div style="width: 100px; height:100px;background-color: #cff; margin: 10px; padding: 10px; border: 10px solid red; position: relative;top: 10px;left:10px;"> 1 </div> <div style="width: 100px; height:100px; background-color: #ccf;"> 2 </div></div>

加上margin/padding/border之后图对比:

absolute 绝对定位

位置设置为 absolute 的元素,相对于非`static`定位以外的第一个父元素进行绝对定位,脱离了正常文档流,该元素不占据正常文档流空间,因此会影响其他元素的偏移。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。

我们用个简单例子分析

正常文档流

<div style="width: 200px; height:200px; background-color:green; position: relative;"> <div style="width: 100px; height:100px;background-color: #cff;"> 1111111111 </div> <div style="width: 100px; height:100px; background-color: #ccf;"> 我是2,我在下面 .....我是2,。我在下面,会被覆盖? </div></div>

加了absolute之后的布局

设置为绝对定位之后,被定位的元素会以 “第一个设置了定位的祖先元素” 定位,这里就是第一个div元素。

<div style="width: 200px; height:200px; background-color:green; position: relative;"> <div style="width: 100px; height:100px;background-color: #cff; position: absolute;top: 10px; left: 10px;"> 1111111111 </div> <div style="width: 100px; height:100px; background-color: #ccf;"> 我是2,我在下面 .....我是2,。我在下面,会被覆盖? </div></div>

加上margin/padding/border之后的布局

记住一点,absolute是相对第一个被定位的祖先元素。加上margin/padding/border之后,也是在这些属性起作用之后,再来计算absolute。

<div style="width: 200px; height:200px; background-color:green; position: relative;"> <div style="width: 100px; height:100px;background-color: #cff; position: absolute;top: 10px; left: 10px;margin: 10px; padding: 10px;border: 10px solid red;"> 1111111111 </div> <div style="width: 100px; height:100px; background-color: #ccf;"> 我是2,我在下面 .....我是2,。我在下面,会被覆盖? </div></div>

加上margin/padding/border之后,absolute定位的对比图:

fixed 固定定位

位置被设置为 fixed 的元素,可相对于浏览器窗口进行定位。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式),低版本的IE不支持。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

sticky 粘性定位

盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

注意的点

    这里的几个属性,都可以理解为相对定位,只是参照物不一样。relative,参照物为自己。absolute,参照物为有定位(非static定位)的父元素。fixed, 参照物为浏览器的视口。sticky,参照物为浏览器视口。设置不同方向的值,会粘住于不同方向。我们知道html和body元素相差有8px。relative和static方式在最外层时是以body标签为定位原点的,而absolute方式在无父级是position非static定位时是以html作为原点定位。sticky 粘性定位,须指定 top,right,bottom和left四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。如果只设置position属性,覆盖程度:relative > fixed > absolute > sticky > static,relative会在最上面。(关于这一点,还是有点点疑惑的,为什么会这样,或者为什么不是这样)

此文档对应的例子

里面有position各种属性的情况。

参考资料

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/positionhttp://www.w3school.com.cn/cssref/pr_class_position.asp