4-7绝对定位的参考点的就近原则

liu1992452008

于 2017-07-18 23:27:13 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/75331949

HTML 专栏收录该内容

19 篇文章

订阅专栏

本文通过一个具体的HTML和CSS实例详细解析了绝对定位的工作原理及布局技巧。通过设置不同元素的绝对定位属性，演示了如何实现复杂的页面布局效果。文章重点介绍了绝对定位中top、left等属性的作用，并展示了这些属性是如何影响元素在页面上的位置。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*绝对定位的盒子参考点:就近原则,任何定位都可以作为参考*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            width: 400px;
            height: 400px;
            padding: 100px;
            border: 10px solid red;
            margin: 100px;
            position: absolute;
        }
        
        .box2 {
            width: 300px;
            height: 300px;
            border: 50px solid blue;
            position: absolute;
        }
        
        p {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 60px;
            left: 60px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <p></p>
        </div>
    </div>
</body>

</html>