定位

• 让元素在一定程度上摆脱普通流的约束，放置在任意位置，对其它元素不受影响

定位有五个属性，四个值

position：static、relative、absolute、fixed、sticky

top、left、right、bottom

position:static

• 指定元素在普通流中使用默认布局位置，等同于不加
• 一般用于覆盖设置过其它定位方式的场景
• 此时top、right、bottom、left和z-index属性无效
• 日常所说的定位元素不包括static

position:relative

• 未脱离普通流（为元素预留空间），元素本身在普通流中的位置并未发生变化，只是视觉上变化
• 经常作为absolute的参考

    <div class="hero">
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <p>哈哈哈2</p>
    </div>
		.hero>p:nth-child(2){
            position: relative;
            top: 20px;
        }

上面代码，第二个p元素向下移动，但它后面的p却不随着它移动而移动

position:absolute

• 指元素脱离普通流（不为元素预留空间），相对于最近的非static定位的祖先元素来进行偏移
• 适用场景有：下拉菜单、弹窗、输入框内图标，以及其它任何可能产生“覆盖”的场景

position:fixed

• 从普通流中完全脱离，相对于浏览器窗口进行定位，固定不变
• 一定要设置top或者bottom

position:sticky

• 当元素处于普通流中的时候，位置不变；当触碰到页面顶/底部的时候，元素脱离普通流，效果如同fixed一般
• 如果在一个容器中放置了多个sticky，会出现下一个sticky元素把上一个“覆盖”的效果
• 如果在并列的多个块容器中放置了多个sticky，会出现下一个sticky元素把上一个“推走”的效果

一些注意事项

• 定位元素一般仅指代absolute和fixed

• 定位元素的宽度会收缩，一般需要设置固定宽度或宽度100%

• 设置为定位元素的行内元素拥有块级特性，可设置宽高

• 定位元素脱离普通流，可相互覆盖，通过z-index设置层级

层叠上下文 Stacking Context

• 一父多子参与构建的，遵循一定规则的，独立的环境
• 子项可能创建新的上下文，与外层上下文有同样的规则，且与外层上下隔绝