CSS——定位、层级与透明效果

目录

1、相对定位

2、绝对定位

3、固定定位

4、粘滞定位

5、绝对定位元素布局

6、层级以及透明效果

---

1、相对定位

定位：

        更加高级的布局手段

     - 定位指的就是将指定的元素摆放到页面的任意位置

        通过定位可以任意的摆放元素

      - 通过position属性来设置元素的定位

        -可选值：

          static： ['stætik] 默认值，元素没有开启定位

          relative： ['relətiv] 开启元素的相对定位

          absolute： ['æbsəlju:t] 开启元素的绝对定位

          fixed：开启元素的固定定位（也是绝对定位的一种）

          sticky： ['stiki] 开启元素的粘滞定位

相对定位：

      当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型

      1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

      2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

      3.相对定位的元素不会脱离文档流

      4.相对定位会使元素提升一个层级

      5.相对定位不会改变元素的性质，块还是块，内联还是内联

偏移量

    当开启了元素的定位（position属性值是一个非static的值）时，

      可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动

      left：元素向右偏移量，

      right：元素向左偏移量

      top：元素向下偏移量

      bottom：元素向上偏移量

      可设正值，也可设负值

   

    通常偏移量只需要使用两个就可以对一个元素进行定位，

      一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个