前几天在牛客看见了一个面试题 “position几种属性，以及应用场景”。然后就来详细的了解了一下position属性。
position简单介绍
CSS position 属性用于指定一个元素在文档中的定位方式。分为相对定位(relative)，绝对定位(absolute, fixed)，粘性定位(sticky)。并且定位元素都可以设置四个方向(top, left, right, bottom)的值，来满足你的定位需求。
下面就来看看position的用法吧。
position的属性值
static
- 他是position的默认值。
- 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时
top,right,bottom,left和z-index属性无效。
<style> * { padding: 0; margin: 0; } p { position: static; left: 100px; } </style> <body> <div> <p>p标签</p> </div> </body>
网络异常，图片无法展示
|
relative
- 相对定位，通过top, bottom, right, left移动元素时，原来的位置依旧被保留。
<style> * { padding: 0; margin: 0; } p { display: inline; position: relative; left: -20px; background: red; } span { background: blue; /* width: 100px; */ } </style> <body> <div> <p>p标签</p> <span>span标签</span> </div> </body>
网络异常，图片无法展示
|
- position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
- 如果没有定位偏移量，对元素本身没有任何影响。
- left, top, right, bottom是相对当前元素自身进行偏移的。
absolute
- 绝对定位，如果设置了定位偏移量，元素会被移出正常文档流，并不为元素预留空间。完全脱离文档流。
- 使内联元素支持宽高,即让内联元素具备块的特性。
<style> * { padding: 0; margin: 0; } span { width: 400px; position: absolute; left: 20px; top: 20px; background: red; height: 200px; } </style> <body> <div> <span>span标签</span> </div> </body>
网络异常，图片无法展示
|
- 使块元素默认宽根据内容决定(让块具备内联的特性)。
<style> * { padding: 0; margin: 0; } body { height: 1000px; } p { position: absolute; background: red; top: 20px; left: 20px; } main { background: blue; } </style> <body> <div> <p>p标签,绝对定位元素</p> <main>main标签， 非定位元素</main> </div> </body>
网络异常，图片无法展示
|
- 他的偏移量是相对于最近的非 static 定位祖先元素的偏移。如果没有定位祖先元素，那么就相对于整个文档。所以一般元素布局都会使用子绝父相。
- 绝对定位的元素可以设置外边距，且不会与其他边距合并。这一点是BFC规范中的。
fixed
- 绝对定位，如果设置了定位偏移量，元素会被移出正常文档流，并不为元素预留空间。
- 但是他的偏移量是相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
- 使内联元素支持宽高,即让内联元素具备块的特性。
- 使块元素默认宽根据内容决定(让块具备内联的特性)。
fixed属性会创建新的层叠上下文。当元素祖先的transform,perspective或filter属性非none时，容器由视口改为该祖先。元素的位置在屏幕滚动时会改变。因为他是相对父元素定位的。
<style> * { padding: 0; margin: 0; } div { margin: 200px; background: blue; width: 200px; height: 200px; transform: rotate(20deg); } p { position: fixed; background: red; top: 20px; left: 20px; } </style> <body> <div> <p>p标签</p> </div> </body>
网络异常，图片无法展示
|
从上面可以看出，它相对的是父元素定位的。并且会跟随滚动条的移动的移动。
sticky
- 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值(就是指定的偏移量)前为相对定位，之后为固定定位。
- 如果未设置定位阀值，那么他的行为与相对定位相同。
- 元素根据正常文档流进行定位，然后相对它的最近滚动祖先 和 最近块级祖先，包括table-related元素，基于
top,right,bottom, 和left的值进行偏移。偏移值不会影响任何其他元素的位置。如果最近块级元素不可滚动，那么他设置的偏移量将不会生效。
<style> * { padding: 0; margin: 0; } body { height: 1000px; } p { position: -webkit-sticky; position: sticky; background: red; top: 20px; } </style> <body> <div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <div>ssss</div> <p>p标签</p> </div> </body>
网络异常，图片无法展示
|
从上面可以看出，当滚动位置距离该元素20px时，那么他将继续随滚动条滚动。
去掉外层包裹的div。
网络异常，图片无法展示
|
从上面可以看出，当滚动位置距离该元素20px时，那么他将被固定到当前位置，不随滚动条滚动。
- 该值总是创建一个新的层叠上下文。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上。当该祖先的
overflow是hidden,scroll,auto, 或overlay时，抑制了任何“sticky”行为。
z-index
z-index 属性设定了一个 定位元素(即其 position 属性值不是 static) 及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。
