设置position: relative后top: 50%不生效的原因是什么

原因分析 #

• 相对定位（position: relative）元素的百分比top属性，需要基于包含块的显式高度计算
• 当前场景下.frame1的包含块为body，而html、body标签默认高度为auto（仅由内部内容撑开），没有明确的高度基准，浏览器会直接将百分比top视为auto处理，因此看不到位置变化。
• 补充：left: 50%可以生效，是因为块级元素的包含块默认宽度等于视口宽度，存在明确的宽度计算基准。

解决方法 #

给html和body显式设置100%高度，同时清除默认边距避免出现多余滚动条即可：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

如果需要让.frame1完全居中于视口，还可以给.frame1新增transform: translate(-50%, -50%)，抵消元素自身宽高带来的偏移，避免仅元素左上角对齐视口中心的问题。

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