定位相关复习：文档流

最新推荐文章于 2022-05-02 16:57:18 发布

Judian6974

最新推荐文章于 2022-05-02 16:57:18 发布

阅读量578

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Judian6974/article/details/75267511

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

定位相关复习

文档流：

HTML的布局机制，块元素独占一行，内联元素（inline）不独占一行

（1）相对定位：

相对于一个东西来定位。这个东西就是它本身，同时可以使用left、top、bottom、right来移动元素的位置。

相对定位不会脱离文档流

（2）绝对定位：

找一个东西相对来绝对定位。这个东西（element）必须设定position，并且定位方式非static。

（这个小鬼（element）定位可以是爸爸、爷爷、太公...（祖宗：body）中有position：absolute或position：relative、fixed，就是不能是position：static或直接没有写定位）

注：绝对定位脱离文档流。一般使用“父相子绝”。

使用绝对定位设置top:0px和不设置top属性的区别：未设置时：元素的位置和没有脱离文档流的位置一样

<body>
    <div class="div1" style="width: 250px;height: 250px;border: 1px solid blue">
        太公
        <div class="div2" style="width: 200px;height: 200px;border: 1px solid magenta">
            爷爷
            <div class="div3" style="width: 150px;height: 150px;border: 1px solid gold;position: fixed">
                爸爸
                <div class="div4" style="width: 100px;height: 100px;border: 1px solid red;position: absolute;bottom: 0px">
                    小鬼
                </div>
            </div>
        </div>
    </div>
</body>