前言今天想说说css中的position属性。这是元素定位属性。目的是整理一下自己在学习和工作中积累的经验。根据MDN文档，CSS属性位置用于指定元素在文档中的定位方式。此外，还需要偏移属性top、right、bottom和left来确定元素的最终位置。适用于所有元素，没有继承，会创建一个堆叠上下文。定位值一共有5种（？）：position:static默认值position:relative相对定位position:absolute绝对定位position:fixed固定定位position:sticky粘性定位因为position属性是很基础的知识，所以在接下来我不会在文章的篇幅中用很多图片或者demo来演示效果。毕竟这些内容应该是通过查阅文档或者教程才知道的。默认值为静态。当元素的position属性没有设置或者值为static时，元素在文档流中，left等offset属性没有作用。文档还说z-index值无效。想了想，如果元素在正常的文档流中，一般栈上不会有其他元素与它冲突，所以z-index基本没有应用场景。也许我错过了什么？除了这些，static没有什么特别的。相对定位相对设置相对定位元素仍然在文档流中，它们占据的空间仍然被预留。但是，如果设置了上、下、左、右偏移属性，则会相对于原位置往相应的方向移动。此时元素空间依然存在，周围的元素不会重新排列。也就是说，在元素原来的位置上放了一块透明的砖块，看不见摸不着。此外，相对定位的元素会创建一个包含块，用作定位内部子元素的基点。包含块定义：由最近的块级祖先框、表格单元格或行内块祖先框的内容边组成。包含块的判定：绝对定位absolute绝对定位的元素会脱离文档流（正常流），此时它原来的空间为0，即没有透明砖块占用空间。附近的元素也会重新排列。同时元素会生成格式化上下文（BFC），上下边距不会合并，不会因为元素内部浮动导致高度塌陷。之所以要说明一下包含块的定义和判断，是因为绝对定位元素的定位点是最近的包含块，而设置的上、下、左、右偏移属性都是以上为准以包含块的左角为原点（这与文本的方向有关）。从上图可以看出，如果绝对定位的祖先元素的position属性是静态的，那么它会相对于初始包含块——body进行定位。如果存在具有某个其他值的position属性的祖先元素，则它相对于它创建的包含块进行定位。这里我其实是想和浮动元素做个对比。看到张新旭在张新旭的博客中提到，浮动元素可以看成是有宽没有高的inline-block元素，而绝对定位是没有宽没有高的inline-block元素。至于为什么被认为是inline-block元素，我不太记得了~Fixedpositioningfixed固定定位元素是相对于屏幕视口定位的。在这种情况下，位置不会因滚动而改变。如果打印网页，此元素将出现在每个页面的固定位置。此外，固定定位的元素还会创建格式化上下文。文档中还提到有一种特殊情况会影响固定定位。也就是当父元素的transform属性不为none时，固定位置容器改为父元素而不是viewport。这种意外情况需要注意和避免。最后，如果你是移动web开发者，你会遇到ios系统的webview固定布局的一些bug。这些bug不一定能找到完美的解决办法，所以如果遇到了，可以考虑js动态判断修改样式或者直接重新布局。Sticky定位Sticky是很多人都没见过的定位方式，因为它是一个实验属性，文档建议不要在生产环境中使用。不过它的功能还是很有用的，大家可以了解一下。粘性定位是相对定位和固定定位的结合。根据上、下、左、右的偏移属性设置阈值。如果相对定位超过阈值，则转为固定定位。既然是新属性，就去这个demo看看吧。在demo中，代码主要是dt{position:-webkit-sticky;定位：粘性；top:-1px;}首先从浏览器对sticky定位的支持来看，基本上都支持，除了ie。但是Firefox不支持表格相关的元素，Chrome不支持thead、tr等元素。因此，如果想正常使用，可能需要加上-webkit等前缀。二、设置top:-1px为阈值。当一个元素作为相对定位元素时，如果它的top到包含块的距离>=-1px，就会转化为固定定位。所以要使用粘性定位，阈值的设置是关键。除了demo中展示的功能，粘性定位的应用场景也可以用在所谓的粘性页脚中。相信很多时候产品都会需要这样的布局~定位元素的宽度受限很多时候我们使用position:absolute;top:0;bottom:0;right:0;left来让绝对定位元素垂直居中andhorizo??ntally:0;width:50%;height:50%;margin:auto;在这种情况下，由于margin设置为auto值，根据等式：margin+border+padding+width=elementwidth/height所以margin会设置相应方向空闲空间的一半来实现居中的情况。但是绝对定位的元素不会脱离文档流吗？为什么保证金仍然有效？原来我们还设置了上下左右偏移属性。一般我们只需要设置上或下，左或右。如果上下或左右同时设置，也就是说当相反的定位方向属性同时有特定的定位值时，就会出现流体特性。此时，绝对定位元素的宽度将适应包含块的宽度。在这种情况下，绝对定位的元素与普通文档流的元素相同，可以使用margin:auto居中。display/float/position的三角关系当元素设置为绝对定位或固定定位时，floating属性无效，display也变为块值。也就是说，此时的元素都是块级元素。如果把display设置为none，此时元素就消失了，设置的position和float属性自然也就没有意义了。总结花了2个小时，查阅了文档、书籍和博客，总结了position属性的概念、应用场景和表现方式。还有一些相关的知识，比如BFC，文档流，边距合并等等，还有一些不太常用的知识，比如文档文本方向。尽管如此，我认为就位置属性而言，我已经描述了我目前遇到的所有点。还是有点成就感的，哈哈。
