CSS 定位

相对定位

相对定位相对的是自己原来的位置，开启相对定位的元素并没有脱离文档流，可以超出父容器的大小，与 float 区分

• 有四个属性值：left、bottom、right、top
• 左和右不能同时用，同时用时左生效；
• 当一个元素右定位属性，这个元素的层级高于普通的元素；
• 当两个元素都开启定位时，采用后来居上；
• margin 可以作为移动元素的属性来用，但是用定位还用margin有点儿乱，相对定位对 margin 和 float 没有影响

        .box1{
            position: relative;  /*开启定位*/
            left: 100px;
        }

适用于：1. 元素进行微调 2. 相对定位与绝对定位相互配合

绝对定位

一旦开启绝对路径脱离文档流，但是区别与浮动，不会出现塌陷问题
绝对定位参考的是包含块

什么是包含快？

• 没有脱离文档流的元素，腐胺素就是包含块
• 脱离文档流的元素，第一个开启定位的祖先元素，就是他的包含块

        .box1{
            position: absolute;  /*开启定位*/
            left: 100px;
        }

• 绝对定位的元素绝对不能用 float
• 开启绝对定位的元素叫做定位元素，宽高默认被内容撑开，可以自己设置
  适用于：一个元素盖到另一个元素上面

固定定位

参考视口，固定位置，不论怎么滚动

        .box1{
            position: fixed;  /*开启定位*/
            left: 100px;
        }

• 开启固定定位并设置浮动的元素，float 失效
• 脱离文档流，对后面兄弟元素和父元素有影响
• left和right不能一起设置，top和bottom不能一起设置
• 也可以通过margin调整，不推荐

粘性定位

离他最近拥有一个“滚动机制”的祖先元素，即使这个祖先不是最近的真实可以滚动的祖先(overflow:auto)

        .box1{
            position: sticky;  /*开启定位*/
            top: 0px;
        }

• 可以与float、margib一起设置，不推荐使用

层级

定位的层级：

• z-index值越大层级越高，值越低层级越低，如果值大仍没有覆盖，请检查包含块的层级
• 只有定位元素设置z-index才有效

ps：定位可以越过padding，也就是说参考的是盒子“单位”

定位特殊应用

以下特殊应用只是针对 绝对定位和固定定位

1. 让定位元素的宽充满包含块

• 块宽想和包含块一致，给定位元素设置left、right为0
• 块高度和包含块一致，给定位元素设置top、bottom为0

让定位元素再包含块中居中

方案前提，定位元素必须要有宽高
方案一

left:0;
right:0;
top:0;
bottom:0;
margin:0;

方案二

left:50%;
top:40%;
margin-tleft：负的宽度一半
margin-top:负的高度一半