摘要：默认值当元素的属性没有设置或者值为时，元素处于文档流中，且等偏移属性是不起作用的。相对定位设置相对定位的元素仍然处于文档流中，其占据的空间仍然保留。包含块的判定绝对定位绝对定位元素会脱离文档流，此时其原有空间为，也就是不存在透明砖块占位。
前言
今天呢，想聊聊css里的position属性。也就是元素定位属性。目的呢，是为了梳理一下自己学习工作中积累的经验。
标准根据MDN文档，CSS属性 position 用于指定一个元素在文档中的定位方式。另外还需要偏移属性top, right, bottom 和 left来决定了该元素的最终位置。适用于所有元素，没有继承性，会创建层叠上下文。而定位的值一共有5种（？）：
position：static 默认值
position：relative 相对定位
position：absolute 绝对定位
position：fixed 固定定位
position：sticky 粘性定位
因为position属性是非常基础的知识，所以在接下来的篇幅中我不会用很多图片或demo演示效果。毕竟这些内容应该是查阅文档或教程就能知道的。
默认值static当元素的position属性没有设置或者值为static时，元素处于文档流中，且left等偏移属性是不起作用的。文档中还说z-index值无效。我想了一下，如果元素是处于正常文档流中，一般是不会有其他元素与他在层叠上有上下的冲突，所以z-index的应用场景基本是没有的。也许有我漏考虑的地方？除了这些，static也没有什么特殊的地方了。
相对定位relative设置相对定位的元素仍然处于文档流中，其占据的空间仍然保留。但是如果设置了上下左右偏移属性，它会相对于原位置向相应的方向移动，此时元素空间仍存在，周围元素不会重新排列。也就是说，该元素原有的位置上被放置了一块透明的砖块，看不见但摸得着。另外，相对定位元素会创建一个包含块，用于作为内部子元素定位的基点。
包含块的定义：由最近的块级祖先框，表单元格或行内块inline-block祖先框的内容边界（content edge）构成。
包含块的判定：
绝对定位absolute绝对定位元素会脱离文档流（normal flow），此时其原有空间为0，也就是不存在透明砖块占位。附近元素也会重新排列。同时，该元素会产生格式化上下文（BFC），上下外边距不会合并，不会因为内部浮动元素产生高度塌陷。
之所以要解释一下包含块的定义和判断，是因为绝对定位元素的定位点就是最近的包含块,设置的上下左右偏移属性都是以包含块的左上角为原点（这个跟文字方向有关）。从上图中可以看出，如果绝对定位的祖先元素position属性都是static，那么会相对于初始包含块————body定位。如果存在position属性为其他值的祖先元素，则相对于其创建的包含块定位。
这里其实想跟浮动元素做个对比，看到张鑫旭博客里提到过浮动元素可以看作有宽无高的inline-block元素，而绝对定位则是无宽无高的inline-block元素。至于为什么看成inline-block元素，我也不太记得了~
固定定位fixed固定定位元素，相对于屏幕视口定位，这种情况下不会因为滚动而改变位置。如果是打印网页，该元素会出现在每个页面中的固定位置。另外，固定定位元素也会创建格式化上下文。
文档中还提到，有一种特殊情况会影响fixed定位。就是当父级元素的transform属性不会none时，固定定位的容器改为该父级元素，而不是视口。这种意外情况是需要注意和避免的。
最后，如果你是个移动端web开发者，还会遇到ios系统webview下fixed布局的一些bug。这些bug可能无法找到完美的解决方案，所以遇到的话就考虑js动态判断修改样式或者直接就重新布局吧。
这个定位方式相信很多人都没见过，因为它是一个试验属性，文档建议尽量不要在生产环境中使用。不过它的功能还是很好用的，可以了解一下。
粘性定位是相对定位和固定定位的结合体。根据上下左右的偏移属性设置阈值。若相对定位时超过阈值会转变为固定定位。
由于是新属性,所以去这个demo看看吧。
demo中，代码主要是
dt{
position: -webkit-sticky;
position: sticky;
top: -1px;
}
首先，从粘性定位在浏览器中的支持情况可以看到基本都支持了，除了ie。不过在火狐中不支持table相关元素，chrome中不支持thead和tr等元素。因此想要正常使用，可能需要加上-webkit等前缀。
其次，设置top:-1px作为阈值。当元素作为相对定位元素时，如果其顶部相对于包容块的距离>=-1px，就会转变为固定定位。所以要使用粘性定位，阈值的设置是关键。
除了demo中展示的功能，粘性定位的应用场景还可以用在所谓的sticky footer中。相信有很多时候产品都会要求这样的布局吧~
宽度受限的定位元素很多时候，我们将绝对定位的元素垂直水平居中使用的是
position:absolute; top:0; bottom:0; right:0; left:0; width:50%; height:50%; margin:auto;
这种情况下，由于margin设置为auto值，而根据等式:
margin+border+padding+width=元素宽度/高度
所以会设置margin为相应方向上空余部分的一半，实现居中的情况。
但是，绝对定位元素不是脱离文档流了吗？为什么margin还会起作用呢？原来是因为我们还设置了上下左右偏移属性。一般我们只需设置上或下、左或右，如果同时设置了上下或左右，也就是说，对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。此时，绝对定位元素的宽度就会随着包含块的宽度进行适应。这种情况下的绝对定位元素就和正常文档流的元素一样，可以使用margin：auto进行居中了。
display/float/position之间的三角关系当元素设置成绝对定位或固定定位时，浮动属性无效，display也被改为block值。也就是说此时的元素都是块级元素。
如果display设置为none，此时元素消失，设置的position和float属性自然没有意义。
总结花了2个小时，查文档、书和博客，总结了position属性的概念、应用场景和表现方式。还有一些相关知识只是一笔带过，比如BFC、文档流、外边距合并等等，以及文档文字方向这种不太常见的知识。
尽管如此，我觉得仅position属性而言，我已经将自己目前遇到的点都讲述清楚了。还是有点小成就感的，哈哈。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51566.html
摘要：默认值当元素的属性没有设置或者值为时，元素处于文档流中，且等偏移属性是不起作用的。相对定位设置相对定位的元素仍然处于文档流中，其占据的空间仍然保留。包含块的判定绝对定位绝对定位元素会脱离文档流，此时其原有空间为，也就是不存在透明砖块占位。 前言 今天呢，想聊聊css里的position属性。也就是元素定位属性。目的呢，是为了梳理一下自己学习工作中积累的经验。 标准 根据MDN文档，CS...
摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。 前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。 我们主要从这几个方面来了解下居中： 水平居中 垂直居中 水平垂直居中 水平...
摘要：这两个属性正是今天的重头戏，博主曾在从隐藏元素谈起提起过，但并没做深入解释。另外，四个值分别是相对于图片左上角为原点的坐标值。基本所有的浏览器都支持，可以放心使用。 前言 图片是一个网站必不可少的元素，而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作，通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题，实际项目中可能用的比较少，包括博主自己也只是用过几次剪切，很...
摘要：我们来看看文档上是怎么说的吧在中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用来写样式。这些样式名基本上是遵循了上的的命名，只是按照的语法要求使用了驼峰命名法，例如将改为。 我遇到了什么问题？ 不久之前我重构了一个古老的项目，总结了一些js方面的想法，不过对于一个前端项目而言不仅仅只由js组成的嘛，上学的时候老师和我说HTML+CSS+JS对应的是页面的骨架、皮肤和肌肉。既然...
阅读 1783·2023-04-26 00:47
阅读 1542·2021-11-11 16:55
阅读 2596·2021-09-27 14:04
阅读 3546·2021-09-22 15:58
阅读 3553·2021-07-26 23:38
阅读 2127·2019-08-30 13:47
阅读 1977·2019-08-30 13:15
阅读 1138·2019-08-29 17:09
