关于position: relative下top与bottom属性生效逻辑的疑问

你遇到的问题核心在于：position: relative元素的top/bottom、left/right并不是简单的“后定义覆盖先定义”，而是由元素的布局方向和尺寸是否固定决定的。

一、垂直方向（top vs bottom）的生效规则 #

默认网页是垂直从上到下的布局方向，对于设置了固定高度的relative元素：

• 只有top属性会生效，bottom会被直接忽略，不管你把bottom写在top之前还是之后。
• 只有当元素高度设为auto时，top和bottom才会同时作用，共同拉伸元素的垂直高度。

你的代码里，.relative元素明确设置了height:100px（固定高度），所以即使你写了bottom:200px在最后，它也不会生效，浏览器只会认top:100px。

二、水平方向（left vs right）的生效规则 #

默认网页是水平从左到右（ltr）的布局方向，对于设置了固定宽度的relative元素：

• 只有left属性会生效，right会被忽略。这就是为什么你代码里left:100px看起来覆盖了right:100px——本质不是后定义覆盖，而是布局方向导致left优先级更高。
• 如果元素宽度设为auto，left和right会同时作用，拉伸元素的水平宽度。

验证示例 #

如果把你的.relative样式改成下面这样，bottom就会生效：

.relative{
    background:#ff0;
    height:auto; /* 改为自适应高度 */
    width:100px;
    position:relative;
    top:100px;
    right:100px;
    left:100px;
    bottom:200px;
}

此时元素会被top和bottom共同拉伸，垂直方向的位置和高度都会受两者影响。

总结 #

• 固定尺寸（宽/高）的relative元素：同一方向上，只有起始边对应的属性（默认top/left）会生效，另一方向的属性（bottom/right）被忽略，和书写顺序无关。
• 自适应尺寸的relative元素：同一方向的两个属性会同时作用，调整元素的位置和尺寸。

内容的提问来源于stack exchange，提问作者Heli Aghara