相对定位position: relative;

最新推荐文章于 2025-05-26 23:45:15 发布

weixin_30619101

最新推荐文章于 2025-05-26 23:45:15 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AndyChen2015/p/7650479.html

本文通过一个具体的HTML示例详细解析了CSS中相对定位的使用方法及其特点。解释了如何利用position:relative属性来实现元素相对于其正常位置或者父元素的偏移，并展示了实际的布局效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         position:relative;
         绝对相对定位，他是参照父级的原始点为原始点。
         无父级则以BODY的原始点为原始点，配合TRBL进行定位.
         当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。*/
        #parent{
            height: 200px;
            width:200px;
            border: 4px solid red;
            background-color: #4cae4c;
            margin-top:100px;
            margin-left:100px;

        }

        #children{
            position: relative;
            height: 20px;
            width:60px;
            border: 4px solid blue;
            background-color: #761c19;
            top:10px;
            left: 50px;
        }
    </style>
</head>
<body style="margin: 0;padding: 0;background-color: gray">
    <div id = 'parent'>aaaaaaaaaaaa
        <div id="children">
            bbbb
        </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/AndyChen2015/p/7650479.html