前端 day11

一、position的属性值

  1.position:static;【静态定位】（添加、不添加效果一样）

  2.position:absolute;【静态定位】

      A:绝对定位的参照物：

           1.已经有定位的父元素。

           2.如果父元素没有定位，或者没有父元素，以整个文档为参照物。

     B:绝对定位的特点：

           不占空间，脱离文档流。

  3.position：relative；【相对定位】

       1.参照物是自身默认的值

       2.特点：

            a:占据空间，不破坏文档流；

            b:如果一个元素有相对定位，也不影响margin：0 auto；

  

  4.包含块的设置

      1.给父元素添加position：relative；（目的：让当前元素形成参照物）

      2.给要做定位的元素添加position：absolute；（移动位置）。

   5.定位的层次关系

        1.默认情况下：

             结构里面后写的元素添加定位，会把前面的覆盖掉。

        2.控制定位元素的层次关系：

            1.z-index：；

                    属性值：一个数字，数字越大越靠上层显示，能接受负数。

                    默认值为auto

   6.网页布局

          首选浮动+盒模型

  7.什么情况用定位

         当元素产生层次关系，或者是不规则布局。

   8.相对定位和绝对定位的区别

         1.参照物的区别

         2.是否破坏布局流