2020.0328知识总结

知识总结

一、定位的流程：
给元素添加position属性。（告诉元素开始进行位置移动）
属性值来确定参照物
固定坐标
二、position的属性值
Position:static；（静态定位）
Position：absolute；（绝对定位）
Position：relative；（相对定位）
（1）Position：absolute；
参照物：有定位的父元素，如果没有父元素或者父元素没有定位，以整个文档为参照物。
特点：不占据空间，脱离布局流
注：绝对定位Position：absolute；浮动无效，margin：0 auto；左右居中无效。
（2）position：relative；
参照物：以自身默认的设置为参照物。
特点：占据空间，不脱离布局流。
注：相对定位position：relative；支持浮动和margin：0 auto；左右居中。
三、包含块的设置
1：给父元素添加position：relative；目的是让当前父元素形成参照物（包含块）
2：给要做定位的元素添加position：absolute；移动位置

拓展：默认情况下，结构里面后写的元素添加的定位会把前面的写的元素盖住。
控制定位元素的层次关系：z-index：；属性值：一个数字，数字值越大，越靠上显示。（能接受负值，默认值是auto）

重点：网页布局应首选浮动+盒模型。
什么时候用定位？
当元素产生层次关系或者是不规则布局的时候用定位。