CSS中Position定位属性的使用

---

CSS中定位属性的使用

网页元素默认占用文档流，插入或生成元素后，其将默认按照从左到右的顺序依次排列，这将导致页面中的各种元素因空间占用问题难以被设计至目标效果。
若将整个页面看做一个二层透明，底层白色的双层结构的俯视，那我们可以简单的理解为『大部分元素默认占用底层空间』，但是各种元素共处一层，每个个体都占有一部分空间，不能重叠的情况下将导致我们无法把操作的元素放置到俯视视角的目标位置。

为了摆脱底层的空间占用限制，有效利用二层空间帮我们达到目标效果，可以使用CSS中的定位属性，添加了定位属性的元素将拥有"浮动"效果，会脱离文档流（可简单理解为脱离上面说的白色底层)，进入漂浮状态，即可以使用"二层空间"，可达到这样漂浮效果的还有display:float、z-index等，本篇主要讲position属性（定位属性）。

position属性用于为目标元素确定位置（确定漂浮态位置），其后可以跟从6种定位方法（其中position:static、position:relative无法使目标元素脱离文档流):

position:static
position:fixed
position:relative
position:absolute
position:inherit
position:sticky

接下来我会按照使用频率依次阐述

---

position：absolute

脱离文档流, 虽然定位不一定子绝父相,但是八成有子绝, 也是页面布局主力.

这种方法被称为“绝对定位”，会选取与受定位元素辈分最近的、已经 受到定位的、父级元素 进行定位，前提是这个父级元素受到的定位不是position:static。
跟从上方所说，这种定位方法设置了“子绝父相”结构的组成部分——子元素部分 的位置，利用“受到absolute定位的元素会选取距离自己最近的受到定位的父元素进行定位”的特点，可以将受到absolute影响的元素放入受到relative定位的元素中作为其子元素，这样在后面调整某个模块时仅调节relative定位的父元素即可让整个模块完好的移动。

  <style>
    .父级元素 {
     
      position: relative;
      top: 10px;
      left: 10px;
    }

    .子级元素 {
     
      position: absolute;
      top: 10px;
      left: 20px;
    }
  </style>