css 定位(position)

最新推荐文章于 2023-10-21 09:42:12 发布

原创最新推荐文章于 2023-10-21 09:42:12 发布 · 238 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

css 专栏收录该内容

7 篇文章

订阅专栏

css中的定位有五种方式，分别是静态定位、相对定位、绝对定位、固定定位和粘性定位。它们搭配偏移属性top/right/bottom/left和层叠定位属性z-index一起使用。

元素的五种定位方式

（1）静态定位 static

静态定位是元素的默认定位方式，几乎不使用。

position:static;

（2）相对定位 relative

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的，正常显示，但会保留原来的占有空间。

position:relative;

实例：

<head>
    <style>
        div{ 
            width: 100px; 
            height: 100px;
            display: inline-block;  
            background-color: skyblue;
        }
        .rel{ 
            color: red;
            position: relative;
            right: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="ref1">参照 1</div>
    <div class="rel">相对定位</div>
    <div class="ref2">参照 2
        <p class="abs">绝对定位</p>
    </div>
</body>

效果：
在这里插入图片描述
图中相对定位偏移后，原来占有的空间保留。

（3）绝对定位 absolute

绝对定位使元素独立显示，呈现“漂浮”状态，脱离标准流不保留占有空间。定位参照父元素（最近的祖先元素），一般设置父元素为相对定位position:relative;保证网页正常显示。

position:absolute;

实例：

        .ref2{ position: relative;}
        .abs{
            width:50px;
            height:50px;
            background-color: green;
            position: absolute;
            top:25px;
            left:25px;
        }