关于定位。

今天学习了关于定位的知识

1.相对定位

2.绝对定位

3.固定定位

4.粘滞定位

5.绝对定位元素布局

1.

 <!-- 布局方式：文档流、浮动、定位、等等 -->

    <!-- 面试题：请你说一说定位的种类 -->

<!-- 定位：是一种布局手段，而且它是一种高级的布局手段，

      可以将页面中的任何元素放在页面中的任意位置

     通过position属性进行设置，

       可选值：

          static    默认值   不开启定位

          以下四种都属于开启定位

          relative  开启相对定位

          absolute  开启绝对定位

          fixed     开启固定定位

          sticky    开启粘滞定位

    掌握定位：如何开启、开启后的特点

   

    相对定位

    使用position：relative；开启  

    特点：    

      1、开启了相对定位，如果不配合偏移量使用，元素不会发生任何变化

      2、相对定位，是相对于元素原来在文档流中的位置定位

      3、开启了相对定位后，元素的层级会变高，也就是会盖住其他的元素

      4、开启了相对定位后，元素的性质不会发生变化，

            也就是块还是块，行内还是行内

-->

<!-- 偏移量  相对于定位位置挪动的大小的值

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

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

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

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

       一般情况下，设置偏移量，

              水平方向，left或right调动一个值

              垂直方向，top或bottom调动一个值

-->

    <style type="text/css">

      .box {

        width: 600px;

        height: 600px;

        border: 5px solid rgb(56, 56, 56);

      }

      .box1 {

        width: 200px;

        height: 200px;

        background-color: red;

      }

      .box2 {

        width: 200px;

        height: 200px;

        background-color: yellow;

        /* 开启相对定位 */

        position: relative;

        left: 100px;

        /* right: 150px; */

        /* top: 100px; */

        /* right: 100px; */

     

      }

      .box3 {

        width: 200px;

        height: 200px;

        background-color: green;

      }

      .s1 {

        width: 200px;

        height: 200px;

        background-color: yellow;

        position: relative;

        left: 100px;

        top: -100px;

      }

    </style>