定位的相关属性

Posted 2020-10-06 野得像风

定位方式相关属性

         position

   取值:

        1、static : 默认，静态定位

        2、relative : 相对定位

        3、absolute : 绝对定位

        4、fixed : 固定定位

2、与定位位置相关属性

         top

   bottom

   left

   right

   以像素为单位的值

      3、堆叠顺序

         z-index : value;

   值越大越靠近用户

4、static

      页面中默认定位方式，即文档流定位

  5、相对定位

      相对于当前元素本身出现的位置而实现定位的一种方式

      实现方式:

        position:relative;

  通过 top bottom left right 来实现位置移动

      使用场合：

        1、会进行位置的微妙的调整

  2、配合着绝对定位使用

6、绝对定位

      特点：脱离文档流，不占据页面空间

      定位位置：相对于【最近】的【已定位】的【祖先】元素

                如果祖先元素没有进行定位，它的位置就相对于最初的包含块(body)

      <nav>

        <div>

    <p>

     <span></span>

    </p>

  </div>

      </nav>

      已定位：非static ， 指 relative、absolute、fixed

      实现方式：

         position:absolute

 top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移。

      使用场合:

         1、弹出菜单的位置

      所有的弹出菜单都是绝对定位

7、固定定位

      将元素固定在页面上的某一个位置，不随滚动条滚动而发生改变

      语法:

           position:fixed;

     top、left、right、bottom

常用方式  .设置 父元素为position：relative

                     2.  设置子元素为 position : absolute

                     3. 设置子元素相对于父元素的位移

                          如 top:20px; left:30px;