position详解

Posted shendan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position详解相关的知识,希望对你有一定的参考价值。

导读:

position的定位类型有:static(默认值)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)。其中最常用的就是relative和absolute了。我们先来区别一下相对定位和绝对定位,最后再详细讲解其它取值分别是什么意思。


相对定位和绝对定位

先看看MDN上是怎么解释它们的:

相对定位:相对定位的元素是在文档中的正常位置偏移给定的值,但是不影响其他元素的偏移。

绝对定位:相对定位的元素并未脱离文档流,而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时,绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块)。

看到这里是不是一脸懵逼呢?大家可以尽量去感悟理解一下,如果实在理解不了也没事,为了更形象地理解relative(相对定位)和absolute(绝对定位),我们先来看一段代码:

html

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>

CSS:

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;//相对定位
  top: 20px;
  left: 20px;
  background: blue;
}

可以通过Codepen打开尝试:https://codepen.io/sd237720488/pen/oJogNO

相对定位 relative

#two {
  position: relative;//相对定位
  top: 20px;
  left: 20px;
  background: blue;
 }

上面代码用的是相对定位,运行结果如下:

我们可以发现,在相对定位relative的情况下:

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。——W3school

Two模块:以原本正常位置为参照,向下、向右偏移了20px。
其它元素(One/Three):均以Two模块正常位置的情况下布局,Two并没有影响其它元素偏移。

绝对定位 absolute

当我们把代码中的position:relative替换成position:absolute,会发生什么呢?

#two {
  position: absolute;//相对定位
  top: 20px;
  left: 20px;
  background: blue;
}


我们可以发现,在绝对定位absolute的情况下:

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。——W3school

Two模块:因为没有已定位的祖先元素,所以它的位置相对于最初的包含块,向下、向右偏移了20px。
其它元素(One/Three):就像Two不存在一样布局。


固定定位 fixed

#one {
  position: fixed;
  top: 80px;
  left: 10px;
}

"One" 元素固定定位在离页面顶部 80px,离页面左侧 20px 的位置。


粘性定位 sticky

#one {
position: -webkit-sticky;
position: sticky; 
top: 10px; 
}

以top:10px为临界点,在视图滚动到元素top距离小于10px时,"one"元素为相对定位,超过10px则为固定定位。

sticky为CSS3新增属性。值得注意的是,这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。





以上是关于position详解的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

css position 详解

css常用代码片段 (更新中)

很实用的JQuery代码片段(转)

(转) Java中的负数及基本类型的转型详解

详解Android WebView加载html片段