定位相关复习：文档流

来源：互联网发布：淘宝网评价管理网页. 编辑：程序博客网时间：2024/05/21 14:42

定位相关复习

文档流：

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

（1）相对定位：

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

相对定位不会脱离文档流

（2）绝对定位：

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

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

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

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

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

（3）fixed定位：相对于浏览器窗口的定位

使用了position属性，一般不使用margin，padding属性

阅读全文

1 0