定位

定位

定位流程：

a: 给元素添加position属性.（告诉元素：开始进行位置移动）
b: 属性值来确定参照物.
c: 固定坐标. left /right /top / bottom

position得属性值：

(1) position:static ( 静态定位 )
(2) position:absolute; (绝对定位)
        参照物：
             已经有定位的父元素为参照物
             如果父元素都没有定位或者没有父元素，以整个文档为参照物。
        特点:不占据空间,脱离布局流
(3) position:relative;(相对定位)
        参照物：自身默认的位置
        特点：占据空间的，不破坏布局流;
             如果一个元素有相对定位，也支持margin:0 auto;
​
        注：绝对定位position:absolute; 浮动无效， margin:0 auto 左右居中无效。

包含块的设置

1：给父元素添加position:relative;
          目的：让当前父元素形成参照物（包含块）
          
2：给要做定位的元素添加position:absolute; 移动位置。
例子：(新闻图片)

控制定位元素的层次关系

默认情况下：
     结构里面后写的元素添加定位，会把前写元素盖住
解决办法：z-index:;
            属性值：一个数字，数字值越大越靠上层显示。能接收负数。
            默认值auto

总结

    1.网页布局：
        首选 浮动 + 盒模型
​
    2.什么时候用定位：
        当元素产生层次关系，或者是不规则布局。
​
    3.相对定位 和 绝对定位的区别：
        参照物的区别
        是否破坏布局流
​
    4.包含块的设置：
        给父元素添加 position:relative;形成参照物
        给要做定位的子元素添加position:absolute;
​
    5.定位元素的层次关系： z-index