深入定位

浮动和定位是 CSS 的两大布局方式。浮动布局比较灵活，但不容易控制。定位布局虽然缺乏 灵活性，但是却可以让用户对页面中的元素进行精准定位。在 CSS 中，定位布局共有 4 种方式。 固定定位，相对定位，绝对定位，静态定位。

对于定位布局，要注意以下几点：

▶ 默认情况下，固定定位元素和绝对定位元素的位置是相对于浏览器（body 元素）而言的，而相对定位元素的位置是相对于原始位置而言的。这里要注意一个前提——默认情况下。

▶ position 属性一般配合 top、bottom、left 和 right 来使用。元素只有在定义 position 属性（除了 static）之后，top、bottom、left 和 right 才生效。

▶ top、bottom、left 和 right 这 4 个属性不一定全部都会用到，一般只会用到其中两个。

▶ position:absolute 会将元素转换为 block 元素。

子元素相对父元素定位

  1. 父元素{position:relative;}
  2. 子元素
  3. { position:absolute;
  4.  /*定义top、bottom、left和right*/
  5. }

想要实现子元素相对父元素定位，我们先给父元素定义 position:relative，然后给子元素定义 position:absolute，之后配合 top、bottom、left 和 right 来定位。这个技巧在实际开发中会大量用到，也是定位布局的精髓之一。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .father {
            position: relative;
            width: 160px;
            height: 20px;
            background-color: lightskyblue;
        }

        .son {
            position: absolute;
            top: 20px;
            left: 70px;
            width: 20px;
            height: 20px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="father">
        <span class="son"></span>
    </div>
</body>

</html>

这里注意 span 为行元素，但是这里可以定义宽高，主要是因为 position:absolute 会将元素转换为 block 元素。

元素相对于祖先元素定位

元素相对于祖先元素定位方式与相对于父元素定位方式类似：

祖先元素{position:relative;}
子元素{
  position:absolute;
  /*定义top、bottom、left和right*/
}

相对定位是相对于最近的定义了 position:relative 的元素，如果父元素和祖父元素都设置为 relative，那么最后子元素是相对于父元素来定位。

绝对定位元素是相对于外层第一个设置了 position:relative、position:absolute 或 position: fixed 的祖先元素来进行定位的。

z-index 属性

页面并非平面，而是一个三维结构，对于一个页面来说，它除了 x 轴、y 轴，还有 z 轴。其中，z 轴往往都是用来设定层的先后顺序的。

在 CSS 中，我们可以使用 z-index 属性来定义z 轴的大小，从而控制元素的堆叠顺序。也就是说，我们可以使用 z-index 属性将一个元素放置于另外一个元素的上面或下面。

默认情况下，元素的 z-index 属性处于不激活状态。也就是说，默认情况下，设置元素的 z-index 属性 效。z-index 属性只有在元素定义 position:relative、position:absolute 或 者 position:fixed 后才会被激活。当然，对于 position:fixed 的 z-index，也没有谁会注意，我们直接忽略即可。 image.png
数字方面可将用户设为正无穷。注意，如果元素没有指定 position 属性值（除了 static）则 z-index 无效。

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      div
      {
        position:absolute;
        width:100px;
        height:100px;
        font-size:50px;
      }
      #A{background-color:hotpink;top:10px;left:10px;z-index: 10;}
      #B{background-color:orange;top:40px;left:40px;z-index: 5;}
      #C{background-color:lightskyblue;top:70px;left:70px;z-index: 0;}
    </style>
  </head>
  <body>
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
  </body>
</html>

这里简单介绍，相关的层叠上下文等内容后续进行介绍。