CSS进阶知识（三）

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

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

     通过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>

 

绝对定位：

      开启绝对定位

        position：absolute；

      开启后特点

        1、开启了绝对定位，如果不配合偏移量使用，元素的位置没有发生变化

        2、开启了绝对定位后，元素会脱离文档流，下面的元素就会跑上去

        3、开启了绝对定位，元素脱离文档流，元素的性质就会发生变化

          不再区分块还是行内还是行内块，也就是块元素不会独占一行了，行内元素可以设置宽高等等

        4、绝对定位的原点，是相对于其包含块来确定的

            一般情况下，如果设置子元素为绝对定位，

            我们会同时设置其父元素相对定位，以便设置偏移量，这种情况叫“子绝父相”，

            但最终还是要根据如何方便设置子元素偏移量为准。

        5、开启了绝对定位，元素会提升一个等级

        -->

    <!-- 包含块：

        1、在没有定位的情况下，其包含块就是其父元素或祖先元素

        2、在开启了定位的情况下，其包含块就是离它最近开启了定位的祖先元素，

        如果其祖先元素都没有开启定位，包含块就是根元素（html标签）

<style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        /* 开启一个相对定位 */
        position: relative;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        left: 0;
       bottom: 0;
      
      }
      .box2 {
        width: 250px;
        height: 250px;
        background-color: red;
      }
      /* span{
        background-color: pink;
        position: absolute;
        width: 100px;
        height: 100px;
      } */
      .box3{
        width: 300px;
        height: 300px;
        background-color: plum;
        margin: 10px auto;
        /* position: relative;  */
      }
      .box4{
        width: 350px;
        height: 350px;
        background-color: rebeccapurple;
        margin: 50px auto;
        /* position: relative; */
      }
    </style>

 

固定定位

   如何开启

      position：fixed；

   开启后的特点

    1、开启固定定位后，元素会脱离文档流，元素的性质会发生改变

    2、开启固定定位后，元素会固定在页面中，不会随着滚动条滚动而滚动

    3、开启固定定位后，也需要配合偏移量，来改变元素在页面中位置

    4、固定定位的原点是html根标签,也就是浏览器视口

  常用的场景

    1、固定的侧边导航

    2、固定的广告

    3、固定的顶部、底部导航

 <style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        position: relative;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: rgba(255, 165, 0,.5);
        /* 开启固定定位 */
        position: fixed;
        right: 0;
        bottom: 45%;
      }
    </style>