为何p标签文本无法上移？已尝试bottom等属性仅移除bluePoint1后生效

这个问题其实涉及两个CSS基础知识点：元素定位规则和块级元素的布局特性，我来帮你拆解清楚：

1. 为什么bottom等属性对你的p标签无效？ #

默认情况下，所有HTML元素的position属性值是static——也就是静态定位，而bottom、top、left、right这类定位偏移属性，只有在元素设置为relative、absolute、fixed或sticky定位时才会生效。你给p标签写了bottom: 1000px，但没修改它的定位类型，所以这个属性完全不会起作用。

2. 为什么移除bluePoint1 div后p标签才会“移动”？ #

div是默认的块级元素，块级元素会独占一行空间，所以你的bluePoint1 div会占据一整行，p标签只能被挤到它的下方。当你移除这个div，p标签自然会回到页面顶部，这不是你的bottom属性生效了，只是布局结构发生了变化。

修复方案 #

方案1：让p标签响应定位属性 #

给p标签添加position: relative（保留它在文档流中的位置，只是相对自身位置偏移），之后bottom等属性就会生效：

p {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  position: relative; /* 关键：修改定位类型 */
  bottom: 20px; /* 现在这个偏移值会生效 */
}

方案2：调整两个元素的布局（如果想让它们在同一行） #

如果你的需求是让蓝色圆点和p文本在同一行显示，给bluePoint1添加display: inline-block，同时补充定位属性（因为你用了left: -12px，这个属性对静态定位元素也无效）：

.bluePoint1 {
  position: relative; /* 让left属性生效 */
  left: -12px;
  margin-right: 10px;
  font-size: 3.75rem;
  color: #5CABD1;
  display: inline-block; /* 让块级div和p在同一行 */
  vertical-align: middle; /* 垂直对齐圆点和文本，避免错位 */
}

这样调整后，你就可以通过修改p标签的top/bottom属性（配合position: relative）来自由调整它的位置了。

内容的提问来源于stack exchange，提问作者Estelle D.