定位属性的使用

定位在网页布局的应用中很重要，在我们使用这个属性时，不要滥用。定位分为四类定位：相对定位、绝对定位、固定定位、粘性定位。

我们可以使用position属性来定义我们对应的元素的定位模式，使用了该属性后，我们将拥有五个其他的属性

• top
• right
• bottom
• left
• z-index

1. 相对定位

未来很常用，但是用它只是为了更好的进行绝对定位，一般情况，几乎上我们不适用相对定位的特性（只会设置成相对定位，但是不会去使用top、right、bottom、left这些属性）

选择器 {
  position: relative;
}

相对定位不会脱离文档流。

设置完这个属性后，我们就可以定义top\right\bottom\left四个值，这四个值可以去控制我们元素距离初始位置的距离。

选择器 {
  position: relative;
  top: 10px;
  left: 10px;
}

如果上下同时设置了对应的值，上优先，下不生效，同理，左右也是。因此，如果我们想要设置右边和下面，我们只能写right和bottom不能出现top和left。

注意！！！我们的位置虽然改变了，但是他不会影响其他元素的布局。原位置依旧占据位置。

2. 绝对定位

绝对定位实行会让元素脱离文档流。脱离文档流后，他会保持在添加绝对定位属性之前的位置上，我们可以利用两个位置属性将元素放置在他的定位父元素的任意位置上。

默认情况，绝对定位是基于网页本身进行定位的。可以改变它的定位父元素（offsetParent）。只要我们当前定位元素到html元素之间，有一个元素有定位属性，那个这个元素就是绝对定位元素的定位父元素。

选择器 {
  position: absolute;
}

2.1. 基于哪个元素定位

基于HTML，因为是默认情况下定位

基于div1

基于div2，绝对定位元素会找到离他最近的祖先元素中，有定位属性。

子绝父相

添加了绝对定位后的元素，表现的是块元素的效果。

元素垂直居中

前提是已知元素宽高的情况。

使用绝对定位，可以让元素在一个块元素中垂直水平居中

设置top为50%，然后设置对应元素margin-top 负高度的一半

设置left为50%，然后设置对应元素margin-left 负宽度的一半

3. 固定定位

绝对定位的元素会随着滚动条的滚动而滚动出屏幕。固定定位解决了这个问题。

选择器 {
  position: fixed;
}

用法和absolute一致，只不过参照的物体不同。fixed参照的是我们的浏览器窗口

定位元素的层级问题

当我们给元素进行定位时，元素和元素之间就又可能会重叠，重叠时就涉及到了对应的层级问题。

默认情况下，后定位元素靠上，层级高 。所谓的先后，指的是HTML上的顺序。

默认层级大家都是0

想要强行修改对应的层级，我们可以调整元素的z-index属性。这个属性的值越大，则层级越高，越小层级越低。