如何在网页中添加文本/图片，避免被标题图或导航栏覆盖？

嘿，我看了你的代码，问题主要出在底部固定导航栏的定位和页面间距没处理好，导致内容被挡住了～ 下面给你具体的修复方案，保证你能加任意多的文本都不会被遮挡：

问题根源 #

1. 你用了position: fixed的底部导航栏，这种定位会让元素脱离文档流——简单说就是它不占页面空间，下面的内容会直接跑到它的位置被盖住。
2. 标题图的容器虽然用了相对定位，但默认的body边距和图片的inline属性可能导致内容和标题图之间有多余空隙，或者内容被导航栏挤压。

修复步骤（直接改代码就行） #

第一步：修改CSS样式 #

把你的CSS改成下面这样，我加了关键修复点并做了注释：

body { 
  background-color: rgb(22, 21, 21); 
  color: #FFFFFF; 
  padding-bottom: 70px; /* 给底部导航栏留出足够空间，避免内容被覆盖 */
  margin: 0; /* 去掉浏览器默认的body边距，避免不必要的滚动条 */
}

.titlepage { 
  position: relative; 
  top: 0; 
  left: 0; 
  width: 100%; /* 把图片宽度移到CSS里，更规范 */
  display: block; /* 消除图片默认inline属性带来的底部空隙 */
}

.leftarrow { 
  position: absolute; 
  bottom: 60px; 
  left: 80px; 
}

.rightarrow { 
  position: absolute; 
  bottom: 60px; 
  right: 80px; 
}

.navbar { 
  background-color: rgb(22, 21, 21); 
  overflow: hidden; 
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  text-align: center; /* 保留居中，去掉多余的display:inline-block */
}

.navbar a { 
  color: #FFFFFF; 
  padding: 14px 16px; 
  text-decoration: none; 
  font-size: 30px; 
  display: inline-block; /* 确保a元素的padding和hover效果正常生效 */
}

.navbar a:hover { 
  background: #f1f1f1; 
  color: black; 
}

.active { 
  background-color: #4CAF50; 
}

第二步：调整HTML（可选，但更整洁） #

把图片的width属性从inline样式移到CSS后，HTML可以简化成这样：

<div style="position: relative; right: 0; top: 0;">
  <img src="contact.jpg" class="titlepage" />
  <a href="aboutpage.htm">
    <img src="leftarrow.gif" class="leftarrow" style="width:157.5px;height:91.5px" />
  </a>
  <a href="homepage.htm">
    <img src="rightarrow.gif" class="rightarrow" style="width:157.5px;height:91.5px" />
  </a>
</div>
<div>
  <p> something </p>
  <!-- 现在这里可以加任意多的文本，都不会被遮挡啦 -->
  <p>测试内容1</p>
  <p>测试内容2</p>
  <p>测试内容3</p>
  <p>随便加多少都没问题！</p>
</div>
<div class="navbar">
  <a href="homepage.htm">Home</a>
  <a href="primarydatapage.htm">Primary Data</a>
  <a href="secondarydatapage.htm">Secondary Data</a>
  <a href="aboutpage.htm">About</a>
  <a class="active" href="contactpage.htm">Contact</a>
</div>

为什么这样改？ #

• padding-bottom:70px：给底部固定导航栏留出空间，让内容在导航栏上方结束，不会被覆盖。
• display:block给图片：消除inline图片默认的底部空隙，让内容紧贴标题图。
• 调整导航栏的样式：去掉多余的display:inline-block，给a元素加display:inline-block确保交互效果正常。

这样修改后，不管你加多少文本，不管是桌面端还是移动端，内容都不会被遮挡啦～

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