2020-11-11

 css定位属性

   css定位属性共有三种：

    1.固定定位 fixed

    2.相对定位 relative

    3.绝对定位 absolute

1.固定定位：

position: fixed;

相对浏览器进行定位，无论页面怎么滚动， 这个盒子显示的位置不变。

  用途：

  1.网页返回顶部，侧边广告。

  2.顶部固定导航条

2相对定位：

position: relative;

相对与自己原来的位置定位，进行位置的调整。

    margin与相对定位调整位置的区别：

    1.盒子和盒子的距离，间隙。相对定位：位置的调整

    2.margin会影响后面的元素。相对定位不会影响别人。

    3.不脱标。坑位还占着，别人挤不走。

    4.做绝对定位的参考，子绝父相。

3.绝对定位

    position: absolute;

找一个参考系，定义横纵坐标。默认是在父容器或者浏览器的左上角或左下角。横坐标用left，right 纵坐标用top和botto 绝对定位会脱标。

以盒子为参考点：

      一个绝对定位的元素，如果祖先元素中出现了已定位的元素，那么将以该元素为参考点。

      1.以最近的已经定位的祖先元素，不一定是父容器，也可以是爷爷。

      2.不一定是相对对位，任何定位信息，都可以做子容器的参考点。

      3.使用最多的子绝父相。

      4.以父容器的border内侧点为参考点，进行定位。

    应用：

      1.压盖效果，一个div压在另一个div上面。

      2.绝对定位的盒子居中。  left:50%;margin-left: -自身宽度的一半;

今日作业：

html：

css:

效果图: