CSS 绝对定位和相对定位

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body style="position:absolute">


    <!--总结: 相对定位的元素不会脱离文档流,占用文档流的空间,Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
        绝对定位的元素脱离文档流,偏移不影响文档流中的其它元素,Left; Right;
        Top和Bottom属性与margin属性混合使用,偏移方向相同值累加,方向相反,margin属性值无效。
         绝对定位的元素以最近的定位祖先元素为参照物。-->

    <div style="background-color:  bisque; width: 300px; height: 300px;">
        <div style="background-color: red; width: 100px; height: 100px;">
        </div>
        <div style="background-color: blue; width: 100px; height: 100px;">
        </div>
        <div style="background-color: gray; width: 100px; height: 100px;">
        </div>
    </div>
    <!--仅使用left、right、top和bottom属性布局相对定位元素的情况-->
    <!--元素原本所占的占位空间仍保留,物理空间偏移-->
    <div style="background-color:  coral; width: 300px; height: 300px; position: absolute; left: 300px; top: 0px; ">
        <div style="background-color: red; width: 100px; height: 100px;">
        </div>
        <!--position: relative  使用相对定位,3个div都在文档留中,该div设置像素相对于文档流中个上一个元素-->
        <div style="background-color: blue; width: 100px; height: 100px; position: relative; top: -60px; left: 80px;">
        </div>
        <div style="background-color: gray; width: 100px; height: 100px;">
        </div>
    </div>
    <!--仅使用margin属性布局相对定位元素的情况-->
    <div style="background-color: bisque; width: 300px; height: 300px; position: absolute; left: 600px; top: 0px; ">
        <div style="background-color: red; width: 100px; height: 100px;">
        </div>
        <!--用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度,会影响文档流中的其它元素位置-->
        <!--会影响下一个文档流中个元素的位置-->
        <div style="background-color: blue; width: 100px; height: 100px; position: relative;  margin-top:30px;margin-left:30px;">
        </div>
        <div style="background-color: gray; width: 100px; height: 100px; position: relative; ">
        </div>
    </div>

    <div style="background-color:  coral; width: 300px; height: 300px; position: absolute; left: 900px; top: 0px; ">
        <div style="background-color: red; width: 100px; height: 100px;">
        </div>
        <!--margin-left上增加设置left的值产生的效果,可见margin-left的值和left的值产生了累加。(-->
        <div style="background-color: blue; width: 100px; height: 100px; position: relative; margin-top: 30px; left:30px; margin-left: 30px;top:20px; ">
        </div>
        <!--设置相对定位后(position: relative;)相对于文档流中上一个元素,重叠部分会覆盖上一个元素-->
        <div style="background-color: gray; width: 100px; height: 100px; position: relative; ">
        </div>
    </div>

    <!--仅使用left、right、top和bottom属性布局绝对定位元素的情况-->
    <!--绝对定位元素脱离了文档流,以最近的定位祖先(蓝色框)为参照物。-->
    <div style="background-color: bisque; width: 300px; height: 300px; position: absolute; left: 1200px; top: 0px; ">
        <div style="background-color: red; width: 100px; height: 100px;">
        </div>
        <!--该元素设置了定位(可以设置相对定位或者是绝对定位),所以使用该元素为参照物-->
        <div style="background-color: blue; width: 100px; height: 100px; position: relative; ">
            <div style="background-color: darkgrey; width: 50px; height: 50px; position: absolute; margin-top: 30px; margin-left: 30px; ">
            </div>
        </div>
        <div style="background-color: gray; width: 100px; height: 100px;">
        </div>
    </div>

    <!--该元素为最近使用定位祖先,所以使用该元素是参照物-->
    <div style="background-color:  coral; width: 300px; height: 300px; position: absolute; left: 0px; top: 300px; ">
        <div style="background-color: red; width: 100px; height: 100px;">
        </div>
        <!--该元素没有设置设置了定位(可以设置相对定位或者是绝对定位),所以使用该元素不是参照物-->
        <div style="background-color: blue; width: 100px; height: 100px;   ">
            <div style="background-color: darkgrey; width: 100px; height: 100px; position: absolute; top: 30px; left: 30px;">
                <div style="background-color:   darkorange; width: 80px; height: 80px; position: relative; top: 30px; left: 30px;">
                </div>
            </div>
        </div>
        <div style="background-color: gray; width: 100px; height: 100px;">
        </div>
    </div>


    <div style="background-color: bisque; width: 300px; height: 300px; position: absolute; left: 300px; top: 300px; ">
        <div style="background-color: red; width: 100px; height: 100px;">
        </div>
        <!--该元素没有设置设置了定位(可以设置相对定位或者是绝对定位),所以使用该元素不是参照物-->
        <div style="background-color: blue; width: 100px; height: 100px;   ">
            <div style="background-color: darkgrey; width: 100px; height: 100px; position: absolute; top: 30px; left: 30px;">
                <div style="background-color: darkorange; width: 80px; height: 80px; position: relative; margin-top: 30px; margin-left: 30px; ">
                </div>
            </div>
        </div>
        <div style="background-color: gray; width: 100px; height: 100px;">
        </div>
    </div>

    <div style="background-color: coral; width: 300px; height: 300px; position: absolute; left: 600px; top: 300px; ">
        <div style="background-color: red; width: 100px; height: 100px;  ">
        </div>
        <!--该元素没有设置设置了定位(可以设置相对定位或者是绝对定位),所以使用该元素不是参照物-->
        <div style="background-color: blue; width: 100px; height: 100px;   ">
            <div style="background-color: darkgrey; width: 100px; height: 100px; position: relative; top: 30px; left: 30px;">
                <!--所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,
                    并且它们之间没有非空内容、Padding或Border分隔。  这就是原因了。“嵌套”的盒元素也算“毗邻”,也会 Collapsing Margins。
                    这个合并Margin其实很常见,就是文章段落元素-->
                <div style="background-color: darkorange; width: 80px; height: 80px; position: relative; margin-top: 30px; margin-left:40px; ">
                </div>
            </div>
        </div>
        <div style="background-color: gray; width: 100px; height: 100px;">
        </div>
    </div>


</body>
</html>
相关文章
相关标签/搜索