CSS定位属性怎么设置position实现绝对或相对布局

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS定位属性如何设置position实现绝对或相对布局》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

position: relative 使元素在原位置偏移但仍占文档流空间；2. position: absolute 使元素脱离文档流，相对于最近已定位祖先定位，常用于弹窗等精确布局场景。

在CSS中，通过 position 属性可以控制元素的定位方式，实现相对或绝对布局。这个属性决定了元素如何脱离正常文档流以及它的偏移行为。

1. position: relative（相对定位）

设置 position: relative 后，元素仍保持在正常文档流中，但可以通过 top、bottom、left、right 属性相对于它原本的位置进行偏移。

示例：

.element {
  position: relative;
  top: 10px;
  left: 20px;
}

该元素会从原来的位置向右移动20像素，向下移动10像素，但原来的空间仍然保留。

2. position: absolute（绝对定位）

设置 position: absolute 后，元素完全脱离文档流，不再占据空间，并相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先）进行定位。若没有这样的祖先，则相对于初始包含块（通常是视口）。

示例：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50px;
  left: 100px;
}

此时 .child 会相对于 .parent 定位，出现在其内部左上角偏移 (100px, 50px) 的位置。

关键点总结

• relative 不脱离文档流，偏移基于自身原位置。
• absolute 脱离文档流，定位基准是最近的已定位祖先。
• 配合 top / right / bottom / left 使用才能看到定位效果。
• 父级设为 relative，子级用 absolute，是常见“相对父容器定位”技巧。

终于介绍完啦！小伙伴们，这篇关于《CSS定位属性怎么设置position实现绝对或相对布局》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！