深入理解定位布局：绝对定位与相对定位-阿里云开发者社区

深入理解定位布局：绝对定位与相对定位

2024-08-21 36

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 深入理解定位布局：绝对定位与相对定位

相对定位（Relative Positioning）

相对定位是指元素相对于其在文档流中的原始位置进行定位，通过设置元素的偏移属性（top、right、bottom、left）来调整元素的位置。

常见的用法

相对定位

/* 示例代码 CSS */
        .relative-container {
            position: relative;
            /* 设置相对定位 */
        }
        .relative-item {
            position: relative;
            /* 设置相对定位 */
            top: 20px;
            /* 向下偏移20像素 */
            left: 30px;
            /* 向右偏移30像素 */
        }
  <!-- HTML代码 -->
    <div class="relative-container">
        <div class="relative-item">相对定位元素</div>
    </div>

在这个示例中，我们将一个元素设置为相对定位，然后通过调整其偏移属性，使其相对于原始位置进行偏移，从而实现定位效果。

绝对定位（Absolute Positioning）

绝对定位是指元素相对于其最近的已定位祖先元素（非static定位）进行定位，如果不存在已定位祖先元素，则相对于初始包含块进行定位。常见的用法包括：

/* 示例代码 css  */
.absolute-container {
    position: relative; /* 设置相对定位，作为绝对定位元素的参考容器 */
}
.absolute-item {
    position: absolute; /* 设置绝对定位 */
    top: 50%; /* 相对于父容器的顶部偏移50% */
    left: 50%; /* 相对于父容器的左侧偏移50% */
    transform: translate(-50%, -50%); /* 使用transform属性进行微调，使元素居中 */
}
<!-- HTML代码 -->
<div class="absolute-container">
    <div class="absolute-item">绝对定位元素</div>
</div>