多个绝对定位元素重叠

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>

多个绝对定位元素重叠

Multiple absolute positioned elements overlapping

html

css

css-position