如何将文本定位在屏幕右侧5%处？我的CSS代码为何不生效？

嘿，我知道你卡在哪了！你给第二个<h1>设置的right: 5%没生效，核心问题出在元素的定位类型上——默认情况下，HTML元素的position属性是static，而static定位的元素完全不响应right、left这类定位属性，哪怕父级设了position: relative也没用。

修复思路 #

要让right属性生效，你需要给第二个<h1>设置一个非static的定位类型，结合父级的position: relative，推荐用position: absolute，这样它会相对于父容器（.maindiv）进行定位，完美契合你“屏幕右侧5%位置”的需求。

修正后的完整代码 #

HTML 部分

<div class="maindiv"> 
  <h1>Hello World</h1> 
  <h1>Click Here</h1> 
</div>

CSS 部分

.maindiv { 
  position: relative; 
  /* 可选：给父容器加最小高度，避免absolute元素脱离后父容器高度塌陷 */
  min-height: 1.5em; 
} 

.maindiv h1:nth-child(1) { 
  text-align: center; 
} 

.maindiv h1:nth-child(2) { 
  position: absolute; /* 关键：添加这个属性让定位规则生效 */
  right: 5%; 
  top: 0; /* 可选：和第一个h1顶部对齐，按需添加 */
}

额外说明 #

• 如果用position: relative代替absolute，元素会保留自身原本的文档流位置，再相对于这个位置向右偏移5%，这大概率不是你想要的效果，所以absolute是更合适的选择。
• 给父容器加min-height是为了避免第二个h1用absolute脱离文档流后，父容器高度塌陷的问题（如果第一个h1的高度足够支撑父容器，也可以不加，但加上更稳妥）。

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