多个绝对定位元素重叠[关闭]答案

【问题标题】：Multiple absolute positioned elements overlapping [closed]多个绝对定位元素重叠[关闭]
【发布时间】：2020-07-29 19:52:47
【问题描述】：

我正在制作一个幻灯片式布局的网站。目前，我正在制作以下两张幻灯片：和

我想在每张幻灯片上都有一个按钮（就像在幻灯片 1 中一样）。

我对按钮应用了以下规则：

position: absolute;
bottom: 5%;

我有两个按钮：“了解我”和“我的技能”。

目前，两个按钮是重叠的（这就是您看不到“了解我”按钮的原因）。

我可以应用哪些规则以使两个按钮出现在各自幻灯片中的相同位置？

【问题讨论】：

寻求代码帮助的问题必须包含最短代码以便在问题本身中包含重现它所需的最好是Stack Snippet。见How to create a Minimal, Reproducible Example
@Paulie_Dthanx 的评论，但我认为这个问题不需要完整的代码，因为问题只与按钮的位置有关。无论如何，我得到了解决我问题的答案。再次感谢。

标签： html css css-position

【解决方案1】：

带有position: absolute 的元素相对于它们最近的带有position: relative 的父元素定位。要让您的按钮出现在其相关的幻灯片框架中，请务必将 position: relative 分配给每个框架。

.slide {
  height: 80px;
  width: 200px;
  position: relative;
}

button {
  position: absolute;
  bottom: 4px;
}

#slide-1 {
  background-color: red;
}

#slide-2 {
  background-color: green;
}

<div id="slide-1" class="slide">
  <button type="button">Button 1</ button>
</div>

<div id="slide-2" class="slide">
  <button type="button">Button 2</ button>
</div>

【讨论】：