关于绝对定位和相对定位

最新推荐文章于 2022-02-21 18:36:43 发布

dcfsdf43243

最新推荐文章于 2022-02-21 18:36:43 发布

阅读量173

点赞数

原文链接：http://www.cnblogs.com/Ryan368/p/11327442.html

版权

relative 相对定位：相对于本身的位置进行偏移。

absolute 绝对定位：相对于非static的祖先元素进行位置偏移，当这样的元素不存在，则相对于根级容器定位。

经验告诉我们：当一个元素使用relative定位而使位置发生改变时，其他的定位依赖于它的元素的位置不会改变，就好像这个元素没有改变位置一样。而当一个元素使用absolute根据父元素而位置发生改变时，位置受它影响的其他元素的位置也会相应地发生改变，就好像这个元素被删除了一样。

示例代码：

<style>
        .father1{
            height: 400px;
            width: 400px;
            background-color: antiquewhite
        }
        .cld1-1{
            height: 100px;
            width: 100px;
            background-color: pink;
            position: relative;
            left: 50px;
            top: 30px;
        }
        .cld1-2{
            height: 100px;
            width: 100px;
            background-color: yellowgreen;
        }
        .father2{
            height: 400px;
            width: 400px;
            background-color: bisque;
            /* position属性的值主要有relative、absolute、fixed、static */
            /* 父级元素的position只要不是static，就可以用来被子元素使用absolute来相对它定位 */
            position: fixed;
        }
        .cld2-1{
            height: 100px;
            width: 100px;
            background-color: brown;
            position: absolute;
            left: 20px;
            top: 20px;
        }
        .cld2-2{
            height: 100px;
            width: 100px;
            background-color: coral
        }
    </style>
</head>
<body>
    <div class="father1">
        <!-- 子元素cld1-1采用相对定位，其他子元素（cld1-2)的位置不发生改变 -->
        <div class="cld1-1"></div>
        <div class="cld1-2"></div>
    </div>
    <div class="father2">
        <!-- 子元素cld2-1采用绝对定位，其他子元素的位置将发生改变（按cld2-1不存在来定位） -->
        <div class="cld2-1"></div>
        <div class="cld2-2"></div>
        </div>
</body>