CSS中left属性生效但top属性失效：动态内容元素定位问题求助

你的这个定位需求很实用，但top属性没生效的问题，核心原因在于绝对定位的父元素（#item）没有被内部内容撑开高度：当你给#item设置position: absolute后，它的尺寸默认是“收缩包裹”的，但内部的img用position: relative偏移时，并不会影响#item的高度计算——换句话说，#item的高度实际上是0，这就导致top: -80%相对于0高度根本产生不了任何视觉偏移。

最优解决方案：用CSS Transform替代Relative偏移 #

推荐使用transform: translate()来实现反向偏移，因为它的百分比是相对于元素自身的宽高计算的，完全不受父元素尺寸的影响，而且不需要依赖父元素被内容撑开。

修改后的代码如下：

CSS 代码

#container {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #cfc;
}
#item {
  position: absolute;
  /* 第一步：将元素定位到容器的目标百分比位置 */
  left: 80%;
  top: 80%;
  /* 第二步：反向偏移自身尺寸的对应百分比，实现精准对齐 */
  transform: translate(-80%, -80%);
  background-color: #fcc;
}
#item img {
  display: block; /* 消除图片默认的inline元素间距 */
}

HTML 代码

<div id="container">
  <div id="item">
    <img src="//placehold.it/100x100" />
  </div>
</div>

方案优势说明 #

1. 动态内容适配：#item会自动被内部的图片（或其他动态加载的内容）撑开高度，不需要设置任何固定尺寸；
2. 精准定位：translate()的百分比完全基于元素自身宽高，不管容器尺寸如何变化，都能保持你想要的对齐规则：
   • left: 0% + transform: translateX(0%) → 元素左边缘与容器左边缘对齐
   • left: 100% + transform: translateX(-100%) → 元素右边缘与容器右边缘对齐
   • left: 50% + transform: translateX(-50%) → 元素中点与容器中点对齐
3. 代码简洁：不需要嵌套额外的relative元素，逻辑更清晰。

如果需要兼容极其老旧的浏览器（不支持CSS3 transform），可以考虑用calc()结合margin的方案，但transform的兼容性目前已经覆盖绝大多数现代浏览器，是更优的选择。

内容的提问来源于stack exchange，提问作者Niet the Dark Absol