Html 容器中的元素重叠

在一个页面上，我试图添加子部分，在其中可以添加带有文本框的标题，并且标题必须居中

这就是它的样子：

HTML

<div id="subsections">
   <div class="subsection">
      <div class="subsection-header"><input type="text" class="subsection-title"></div>
      <div class="subsection-right"><button class="iqsp-button-small red delete-section">X</button></div>
      <div class="subsection-content"></div>
   </div>
</div>

现在一切都很好，它按预期工作。但是，我的下一步是添加下表以创建问题：

HTML

<div id="subsections">
   <div class="subsection">
      <div class="subsection-header"><input type="text" class="subsection-title"></div>
      <div class="subsection-right"><button class="iqsp-button-small red delete-section">X</button></div>
      <div class="subsection-content"></div>
   </div>
</div>

小节{
位置：相对位置；
背景色：#006eaf；
最小高度：50px；
边缘底部：10px；
}
.小节标题{
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.分段权利{
位置：绝对位置；
右：0px；
}

X
不
问题:
分数
强制性的

这是你的要求

小节{
位置：相对位置；
背景色：淡蓝色；
最小高度：50px；
边缘底部：10px；
}
.小节标题{
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.分段权利{
位置：绝对位置；
右：0px；
}
.小节内容{
位置：绝对位置；
左：0px；
最高：100%；
}
.可响应{
宽度：100vw；
文本对齐：居中；
}

标题：
X
不
问题:
分数
强制性的
1.
50
40
10

这是你的要求

小节{
位置：相对位置；
背景色：淡蓝色；
最小高度：50px；
边缘底部：10px；
}
.小节标题{
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.分段权利{
位置：绝对位置；
右：0px；
}
.小节内容{
位置：绝对位置；
左：0px；
最高：100%；
}
.可响应{
宽度：100vw；
文本对齐：居中；
}

标题：
X
不
问题:
分数
强制性的
1.
50
40
10

您用于标题的方法将使标题水平和垂直居中于小节内

当桌子也在分段内时，后者并不十分方便

让我们固定它，只水平居中，并在顶部给它一些空间

小节{
位置：相对位置；
背景色：#006eaf；
最小高度：50px；
边缘底部：10px；
}
.小节标题{
保证金：0；
位置：相对位置；
左：50%；
转化：translateX（-50%）；
宽度：适合的内容；
顶部：10px；
边缘底部：30px；
}
.分段权利{
位置：绝对位置；
右：0px；
顶部：0px；
}

X
不
问题:
分数
强制性的

您用于标题的方法将使标题水平和垂直居中于小节内

当桌子也在分段内时，后者并不十分方便

让我们固定它，只水平居中，并在顶部给它一些空间

小节{
位置：相对位置；
背景色：#006eaf；
最小高度：50px；
边缘底部：10px；
}
.小节标题{
保证金：0；
位置：相对位置；
左：50%；
转化：translateX（-50%）；
宽度：适合的内容；
顶部：10px；
边缘底部：30px；
}
.分段权利{
位置：绝对位置；
右：0px；
顶部：0px；
}

X
不
问题:
分数
强制性的

我为您制作了一个片段-a始终是个好主意-该片段与您第一次截图中的图像不一样；表格是否应显示在蓝色按钮下方？绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。看看我给你做的一个片段——a总是一个好主意——这个片段看起来不像你第一次截图中的图像；表格是否应显示在蓝色按钮下方？绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。好的，这是可行的，但是现在所有在下面的东西都在同一条线上。好的，这是可行的，但是现在所有在下面的东西都在同一条线上。