CSS-定位
CSS-定位
相对定位
position: relative;属性给元素开启相对定位
如果一个元素开启了相对定位，那么该元素的层级比其他元素高，但和浮动不同，定位并不脱离原本的文档流
如果同时存在多个开启定位的元素，后面的元素会覆盖在前面的元素上
通过left、right、top、bottom来调整位置，相对于自己原来的位置
相对定位可以和margin同时存在，但不推荐同时用
相对定位可以和浮动同时存在，但不推荐同时用
绝大多数情况下，相对定位和绝对定位要配合使用
绝对定位
position: absolute;属性给元素开启绝对定位
如果一个元素开启了绝对定位，该元素会脱离文档流，但和浮动不同，其文字仍会停留在原来的位置，不会环绕元素
浮动的设计初衷是实现文字环绕元素的效果，所以开启浮动后会导致文字被踢出元素外
绝对定位的位置参考，就是相对于其包含块的绝对位置
包含块
- 没有脱离文档流的元素，父元素就是包含块
- 脱离文档流的元素，第一个开启定位的祖先元素，该元素就是其包含块
如果不考虑包含块的问题，所有绝对定位的元素都将以html为包含块来作为参考位置，这不是我们想要的效果
所以使用“子绝父相”的原则，让父元素为子元素的包含块，这样就可以做到让子元素参考父元素来做定位了
绝对定位可以和margin同时存在，但不推荐同时用
绝对定位不可以和浮动同时存在
注意事项
绝对定位会让元素脱离文档流，并且将元素的性质变为定位元素，如果该元素本身是一个行内元素，将其设置为绝对定位后，可以通过CSS配置其宽高
定位功能不能完全的替代浮动布局，而是搭配使用，先用布局设置大框架后使用定位配置框架中内容
固定定位
position: fixed;属性给元素开启固定定位
固定定位的参考位置，直接以视口作为其元素的包含块
固定定位可以和margin同时存在，但不推荐使用
固定定位不可以和浮动同时存在
固定定位会让元素脱离文档流，且会让该元素成为定位元素
粘性定位
position: sticky;属性给元素开启固定定位
粘性定位的参考位置，是以最近拥有滚动条的元素作为参考点（无论该滚动条是否有效）
粘性定位的有效位置，是以其父元素作为有效范围
粘性定位不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
粘性定位可以和margin同时存在，但不推荐同时用
粘性定位可以和浮动同时存在，但不推荐同时用
定位的层级
无论为何种定位，他们的层级是同优先级的，如果不进行配置，则遵循后者覆盖前者的规则
z-index属性是用于已设置定位的属性，可以手动调整他们的优先级、
如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，请检查其包含块的层级
定位的注意事项
定位是参考整个盒子的，所以定位很有可能忽略掉父元素的padding属性，也就是忽略父元素的内边距
特殊应用
定位之后，元素的性质变成定位元素，其宽高由内容撑开，如果还想让元素维持块元素的独占一行，撑满宽度，则需要额外增加几个属性
这里子元素的宽高未定义，其宽高由内容撑开
/* 左右撑开父元素 */
left: 0;
right: 0;
/* 上下撑开父元素 */
top: 0;
bottom: 0;
不能加width: 100%;的属性，因为width是内容区宽度，再加上内边距和边框的长度势必会超出父元素
设置子元素居中
当子元素有定义的宽高后，使用这些属性搭配可以将元素相对于父元素剧中
left: 0;
right: 0;
top: 0;
bottom 0;
margin: auto;