CSS定位和元素模式转换

最新推荐文章于 2023-05-26 00:09:20 发布

原创最新推荐文章于 2023-05-26 00:09:20 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

定位模式

自动定位static

自动定位（默认定位方式）唯一的用处就是用来取消定位。

相对定位relative

相对定位，相对元素本身的位置进行定位，相对定位不脱离标准流，移动时以自己左上角为基点来移动的。

绝对定位absolute

绝对定位，相对于它上一个已经定位的祖先元素进行定位，如果所有祖先元素都没有定位就以当前屏幕进行定位。如果子元素想在父元素上定位而父元素不想挪动位置，那么就为父元素设置相对定位。（子绝父相）

固定定位fixed

固定定位，相对于浏览器窗口进行定位，脱离标准流

元素模式转换

加了绝对定位和固定定位之后元素模式也会跟着变化，和浮动一样，元素会转为行内块。（行内块的宽度和高度跟内容有关）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: fixed;
            top: 100px;
            left: 20px;
        }

        .right {
            height: 100px;
            background-color: pink;
            position: fixed;
            top: 100px;
            left: 300px;
        } /*行元素转化为行内块元素，宽度为实际内容宽度，没有设定宽度*/
        .top {
            height: 80px;
            background-color: skyblue;
            position: absolute;
            top: 20px;
            left: 20px;
        }/*行元素转化为行内块元素，宽度为实际内容宽度，没有设定宽度*/
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
</body>
</html>