CSS 定位

静态定位（默认值） position:static；

就是默认的文档流布局，元素处于文档流中,只能依次排列，不能随意改变自己的位置

使用其他定位属性后，可以让元素通过 top/bottom/left/right 四个属性移动

层级 z-index：使用定位后，元素发生重叠时可以调整层级

z-index 的值越大，层级越高，值大的元素会覆盖值小的元素
值为整数值，没有任何单位
默认值是 auto，可以看作是层级 0，z-index 还可以取负值

相对定位 position:relative；

移动参照物：元素自己原来的位置

不会脱离文档流并保留原有位置，还可以支撑父元素，不影响父级
与外间距 margin 的区别：margin 会影响其他元素，相对定位不会挤开兄弟元素，但可能会遮盖
常用于需要微调元素位置时使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .fu {
            background-color: #ff0;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
            /* 注意!要先加position才能移动位置 调整层级 */
            position: relative;
            z-index: 10;/*整数 默认0 数值越大 层级越高 */
            left: 25px;
        }
        .z2 {
            background-color: #0f0;
            /*相对定位
            移动参照物:自己原来的位置
            不脱离文档流 不释放布局空间 也不会挤开其它元素*/
            position: relative;
            left: 50px;
            bottom: 50px;
            z-index: -1;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

绝对定位 position:absolute；

移动参照物：离自己最近的使用了非静态定位属性的上层元素

会一路向上找，终点是 html 根元素

绝对定位的元素会脱离文档流，释放布局空间
小技巧："子绝父相"子元素使用绝对定位，父级设置相对定位后就可以变成子元素移动的参照物

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .fu {
            background-color: #ff0;
            position: relative;
            width: 500px;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
        }
        .z2 {
            background-color: #0f0;
            position: absolute;
            top: 0;
            right: 0;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

固定定位 position:fixed；

移动参照物：html 根元素（浏览器窗口）

固定定位也会脱离文档流
我们可以利用固定定位实现页面固定广告与撑满全屏的效果

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .fu {
            background-color: #ff0;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
        }
        .z2 {
            background-color: #0f0;
            /* 固定定位 参照物为html元素 会脱离文档流 释放布局空间 */
            position: fixed;
            right: 0;
            bottom: 0;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

静态定位（默认值） position:static；

相对定位 position:relative；

绝对定位 position:absolute；

固定定位 position:fixed；

4.5 布局方式总结