Web前端-homework3-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44458489/article/details/124093169

本文通过实例代码展示了CSS中的绝对定位和相对定位的使用，包括不同定位方式对元素位置的影响，以及在不同层级嵌套下的布局效果。重点探讨了绝对定位如何相对于最近的已定位祖先元素定位，以及相对定位如何在原有位置基础上偏移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绝对定位

<!DOCTYPE html>
<html>

<head>
    <title>三色</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #d1 {
            position: absolute;
            background-color: red;
        }

        #d2 {
            position: absolute;
            left: 40px;
            top: 40px;
            background-color: yellow;
        }

        #d3 {
            position: absolute;
            left: 70px;
            top: 70px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>

</html>

代码显示：

在这里插入图片描述

相对定位

<!DOCTYPE html>
<html>

<head>
    <title>三色</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #d1 {
            background-color: red;
        }

        #d2 {
            position: relative;
            left: 40px;
            top: 40px;
            background-color: yellow;
        }

        #d3 {
            position: relative;
            left: 40px;
            top: 40px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
    </div>
</body>

</html>

代码显示：

在这里插入图片描述

绝对定位与盒子模型

<!DOCTYPE html>
<html>

<head>
    <title>三色</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #d1 {
            background-color: red;
        }

        #d2 {
            position: relative;
            left: 40px;
            top: 40px;
            background-color: yellow;
        }

        #d3 {
            position: relative;
            left: 40px;
            top: 40px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
    </div>
</body>

</html>

代码显示：

在这里插入图片描述

进阶

<!DOCTYPE html>
<html>

<head>
    <title>三色</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        .div1 {
            border: black 5px solid;
            width: 300px;
            height: 300px;
        }

        .div2 {
            border: black 5px solid;
            width: 200px;
            height: 200px;
        }

        #d1 {
            background-color: red;
            float: left;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        #d2 {
            background-color: yellow;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        #d3 {
            background-color: green;
            position: absolute;
            left: 200px;
            top: 200px;
        }

        #d4 {
            background-color: yellow;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        #d5 {
            background-color: green;
            position: absolute;
            left: 200px;
            top: 200px;
        }

        #d6 {
            border: black 5px solid;
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>

<body>

    <div class="div1" id="d1"></div>
    <div class="div1" id="d2"></div>
    <div class="div1" id="d3"></div>

    <div class="div2" id="d4"></div>
    <div class="div2" id="d5"></div>
    <div id="d6"></div>
</body>

</html>

代码显示：

在这里插入图片描述