HTML+CSS定位

作用：灵活的改变盒子在网页中的位置

实现：

1. 定位模式：position
2. 边偏移：设置和盒子的位置

相对定位

position:relative

特点：

     1. 改变位置的参照物是 自己原来的位置

      2. 不脱标，占位

      3. 标签显示模式特点 不变

绝对定位

position:absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

    1.脱标，不占位置

    2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置

    3. 显示模式特点改变：宽高生效（具备了行内块的特点）

定位居中

实现步骤：

1. 绝对定位
2. 水平、垂直边偏移为50%
3. 子级向左、上移动自身尺寸的一半

• 左、上的外边距为尺寸的一半
• transform:translate(-50%,-50%)
• 代码

        position: absolute;
        left: 50%;
        top: 50%;
        /* 第一种写法 */
        /* margin-left: -265px;
        margin-top: -127px; */

        /* 第二种写法更方便，50%就是自己宽高的一半 */
        transform: translate(-50%,-50%);

固定定位

position:fixed

特点：

1. 脱标，不占位
2. 改变位置的参照物是浏览器窗口
3. 具有行内块显示模式的特点

堆叠层级z-index

取值是整数 默认是0 取值越大显示顺序越靠上

总结