css定位

定位

定位有很多种方式

• static默认值（不定位）
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• sticky 粘性定位

relative相对定位

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

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

 - html
 - body
    - div 添加一个定位属性 relative absolute fixed 
      - div
        - div 添加一个定位属性 relative absolute fixed 
          - div 如果它绝对定位

虽然有两个div都有定位属性，但是我们绝对定位的元素，会根据离他最近的元素（有定位属性）进行定位

fixed 固定定位

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

• top
• left
• right
• bottom
  让元素基于窗口位置进行定位

sticky

position: sticky;

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

z-index 层级关系

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

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

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