html定位样式理解：绝对定位和相对定位_绝对定位到body上样式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41174502/article/details/105441160

设置了绝对定位样式的元素会原地上飘，后飘起来的元素飘得最高，默认z-index（层级）为0。

如下示例：父级div里面有3个div

<style>
    .main{
        width: 300px;
        height: 300px;
        background-color:lightblue;
        margin:50px auto 0;
    }
    .main>div{
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        border: 1px solid black;
    }
</style>
<body>
    <div class="main">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
    </div>
</body>

给子元素son1设置了绝对定位后，son1原地上浮脱离普通文档流，son2、son3往上移动。

当给所有元素都设置绝对定位时，后浮起来的元素飘得最高，son3在最上面：

注意此时只给子元素设置了绝对定位，它会寻找离它最近的设置了相对定位的父级，若没找到会以浏览器窗口为准。

如下示例：

<style>
    .main{
        width: 300px;
        height: 300px;
        background-color:lightblue;
        margin:50px auto 0;
    }
    .main>div{
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        border: 1px solid black;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<body>
    <div class="main">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
    </div>
</body>

设置t0,f0后所有元素都跑到左上角去了。

此时再给main加上position:relative后，子元素会以main作为父级，比如：

<style>
    .main{
        width: 300px;
        height: 300px;
        background-color:lightblue;
        margin:50px auto 0;
        position: relative;
    }
    .main>div{
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        border: 1px solid black;
        position: absolute;
        top: 10px;
        left:10px;
    }
</style>
<body>
    <div class="main">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
    </div>
</body>
</html>

此时若给son1设置z-index=1，son1层级会最高：

试着给son再加一个父级：

<style>
    .main{
        width: 300px;
        height: 300px;
        background-color:lightblue;
        margin:50px auto 0;
        position: relative;
    }
    .content{
        width: 200px;
        height: 300px;
        background-color: cadetblue;
        margin: auto;
    }
    .content>div{
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        border: 1px solid black;
        position: absolute;
        top: 10px;
        left:10px;
    }
    .son1{
        z-index: 1;
    }
</style>
<body>
    <div class="main">
        <div class="content">
            <div class="son1">1</div>
            <div class="son2">2</div>
            <div class="son3">3</div>
        </div>
    </div>
</body>

此时给son设置绝对定位后其会找到距离最近的设置相对定位的父级作为参考：

元素层级关系：

设置了相对定位样式的元素，会以自身原本位置为基础左移或者右移。再拿最开始的例子，当给son1添加相对定位后：

<style>
    .main{
        width: 300px;
        height: 300px;
        background-color:lightblue;
        margin:50px auto 0;
    }
    .main>div{
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        border: 1px solid black;
        position: relative;
    }
    .son1{
        position: relative;
        left: 10px;
        top: 10px;
    }
</style>