定位-position

定位有很多种方式

• static 默认值（不定位）

• relative 相对定位

• absolute 绝对定位

• fixed 固定定位

• sticky 粘性定位

relative 相对定位

---

• top
• left
• right
• bottom

当我们给一个元素添加了相对定位属性，该元素默认情况下不会有任何的变化。我们可以通过上下左右四个值调整元素的位置。虽然我们会看到元素位置改变，但是，对于布局来讲，元素位置就像没有改变一样

.box {
  position: relative;
  top: 100px;
  left: 100px;
}

 一般情况我们使用该属性的原因不是因为要改变元素位置，而是为了保证内部的元素基于该元素进行绝对定位

absoulte 绝对定位

---

• top
• left
• right
• bottom

绝对定位就是直接把元素按照设置的上下左右的值，放在对应的元素的某个位置。

绝对定位会脱离文档流，盖在其他元素的上方。脱离文档流后，不管如何改变位置，都不会影响到布局。

absoulte默认情况下基于html定位，当网页出现滚动条时，absolute会跟着滚动。如果我们想要限制absolute绝对定位的区域，则给祖先元素种任意一个元素添加定位属性

 fixed 固定定位

---

我们使用固定定位，可以实现网页上某个内容一直展示在窗口对应位置的效果：回到顶部、元素垂直水平居中、遮罩

• top
• left
• right
• bottom

sticky(粘性定位)

---

IE浏览器不支持

position: sticky

当某元素滚动到距离对应方向为设置的值时，会直接表现为固定定位的效果，如果不到对应的值，则没有任何定位效果。如果粘性定位生效，原位置继续占位，不会影响布局

z-index 层级关系

默认情况下，所有的层级都为0，先定位的在下面，如果设置的值大于0，则层级放在上面

z-index只能添加到定位元素上

选择器 {
  position: xxx;
  z-index: 1;
}