如何将文本定位在图片上方且不破坏导航栏布局

1. 先修复CSS语法错误 #

你的代码里存在几处语法错误，这些错误会直接导致布局异常，先修正：

• 删除.menu里的无效代码ma
• 将.menu的margin-top: : -20px改为margin-top: -20px（去掉多余的冒号）
• 给.menu的margin-bottom: 0添加分号，改为margin-bottom: 0;
• 给.Logo的margin-top: 0px和margin-bottom: 0px分别添加分号
• 给footer的margin-top: : -5px去掉多余的冒号，改为margin-top: -5px;

2. 实现文本框悬浮在图片上方的布局 #

要让文本框显示在图片上方且不影响其他布局，需要用相对定位+绝对定位的组合：

• 给包裹图片和文本的.container设置position: relative;，让内部的绝对定位元素以它为基准
• 给.imgtext添加position: absolute;，这样bottom和right属性才能生效

修正后的完整CSS代码 #

body{
  margin: 0px;
  padding: 0px;
  height: 100%;
}
header{
  margin-bottom: -20px;
  padding: 0px;
  overflow: hidden;
}
footer{
  background-color: black;
  margin-top: -5px;
  padding: 0px;
}
.bgimage{
  margin-bottom: -5px;
  width: 1920px;
}
.container{
  position: relative;
  width: 1920px; /* 和图片宽度保持一致 */
}
.imgtext{
  border-style: solid;
  color: white;
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  padding-left: 20px;
  padding-right: 20px;
}
.YeStage{
  margin: 0px;
  padding: 0px;
  width: 1920px;
  height: 700px;
  object-fit: cover;
}
.menu {
  margin-top: -20px;
  padding: 0px;
  background-color: #3b1113;
  overflow: hidden;
  list-style-type: none;
  position: sticky;
  top: 0;
  margin-bottom: 0;
  border:0;
}
.Logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 440px;
  height: 50px;
}

.menu  a {
  float: left;
  color: #FFFF;
  text-align: center;
  padding: 36px 38px;
  text-decoration: none;
  font-size: 17px;
}

.menu  a:hover {
  background-color: #f5bd0e;
  color: black;
}

.menu  a.active {
  background-color: #f5bd0e;
  color: black;
}

对应的HTML结构参考 #

确保图片和文本框放在.container内部，示例如下：

<div class="container">
  <img src="你的图片路径" class="YeStage" alt="舞台图片">
  <div class="imgtext">这里是你要显示的文本内容</div>
</div>

修改完成后，文本框会固定在图片右下角（距离底部20px、右侧20px），同时不会破坏导航栏的粘性布局。

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