html - 多个绝对定位元素重叠

Question

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

我想在每张幻灯片上都有一个按钮（如幻灯片 1）。

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

position: absolute;
bottom: 5%;

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

目前，这两个按钮是重叠的（这就是为什么你看不到“了解我”按钮）。

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

Answer 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>