[CSS] position 相对定位和绝对定位

崛起的配菜

已于 2022-08-15 15:06:39 修改

阅读量767

点赞数 1

分类专栏： CSS常见知识点文章标签： css html html5

于 2022-08-12 15:12:04 首次发布

本文链接：https://blog.youkuaiyun.com/Danmon_One/article/details/126299273

版权

这篇博客详细介绍了CSS中的position属性，包括static、relative、absolute和fixed四种定位方式。通过实例展示了它们在HTML页面布局中的效果和区别，重点讲解了relative和absolute定位如何影响元素的位置，并且提到了fixed定位在滚动条情况下的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、position的四个属性值

static：默认值
relative：相对定位
absolute：绝对定位
fixed：绝对定位

二、示例

1、初始状态

HTML部分：

<div class="div1">
        <div class="div11">div11</div>
    </div>
<div class="div2">div2</div>
<div class="div3">div3</div>

CSS部分：

.div1{
    height: 100px;
    width: 500px;
    background-color: blueviolet;
}
.div11{
    height: 50px;
    width: 200px;
    background-color:blue;
}
.div2{
    height: 100px;
    width: 500px;
    background-color:bisque;
}
.div3{
    height: 100px;
    width: 500px;
    background-color:aquamarine;
}