CSS定位入门

定位是一种高级的布局手段，相对于浮动来说，定位更好用更方便。定位它可以将任意元素摆在页面的任意位置。我们用position 来设置定位。

position  设置定位

      可选值

        static    默认值，不设置定位

      --以下四种定位方式，都属于开启了定位--

        relative  相对定位

        absolute  绝对定位

        fixed     固定定位

        sticky    粘滞定位

position 开启定位后还需要设置偏移量。

    偏移量

    left    相对于定位的位置左侧的偏移量

    right   相对于定位的位置右侧的偏移量

    top     相对于定位的位置上侧的偏移量

    bottom  相对于定位的位置下侧的偏移量

今天我们先讲一下相对定位和绝对定位。

相对定位

相对定位

     position: relative;   开启了相对定位

特性：

     1.如果不设置偏移量，元素的位置不发生任何变化

     2.设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置

     3.设置相对定位后，元素的性质不发生变化

     4.设置相对定位后，元素层级会提高

 举个例子

 .box{
        width: 300px;
        height: 300px;
        border: 2px solid red ;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: green;
        position: relative;
        left: 100px;
        top: -100px;
      }

绝对定位

绝对定位

    position: absolute;  开启绝对定位

    特点：

    1.设置决定定位后，元素会脱离文档流

    2.设置绝对定义后，元素的性质就会发生变化，不区分块元素和行内元素

    3.设置绝对定位后，如果不设置偏移量，元素位置也不会变化

    4.绝对定位的原点是相对于其包含块来定位的。

    5.开启绝对定位后，元素层级也会提高。

注意：一般情况下，为了更好的控制子元素的位置，我们开启子元素的绝对定位后，会同步开启父元素的相对定位。 这叫——子绝父相