码迷,mamicode.com
首页 > 其他好文 > 详细

position详解

时间:2018-12-30 20:16:48      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:back   超过   web   讲解   起点   block   定位元素   滚动   打开   

导读:

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详解

标签:back   超过   web   讲解   起点   block   定位元素   滚动   打开   

原文地址:https://www.cnblogs.com/shendan/p/position.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!