javascript - HTML/CSS位置绝对的子代不会与位置绝对的父代一起移动

我正在尝试在HTML / CSS / Javascript中实现滑动效果。我有5张幻灯片，每张都是100％宽和高的div。在javascript中，我水平排列了5个div，将第一个幻灯片设置为填充屏幕，另四个设置为屏幕外。我使用.css('left', i * this.slideWidth);实现了这一目标。

每张幻灯片都包含一个跨度，其中包含一些文本。跨度的位置设置为绝对，这意味着它跟随父级幻灯片。但是，即使幻灯片正确放置在屏幕外，它们也都在屏幕上的同一位置堆叠/重叠。

外观如下所示（请注意左上角的重叠文本）：

我的HTML：

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="slide.js"></script>
</head>

<body>
    <div class = "container" id = "container">
        <div class="slide" id="slide1"><span>Slide 1</span></div>
        <div class="slide" id="slide2"><span>Slide 2</span></div>
        <div class="slide" id="slide3"><span>Slide 3</span></div>
        <div class="slide" id="slide4"><span>Slide 4</span></div>
        <div class="slide" id="slide5"><span>Slide 5</span></div>
    </div>
</body>

我的CSS：

html, body {
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

#container {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.slide {
    height: 100%;
    width: 100%;
    position: absolute;
}

.slide span {
  position:absolute;
  top:0px;
  left:0px;
  color: white;
  font-size: 26px;
}

#slide1 {background: blue;}
#slide2 {background: green;}
#slide3 {background: red;}

如您在CSS中所见，父级幻灯片和子级跨度都将位置设置为绝对位置。这是否意味着跨度会随着滑动而移动？

最佳答案

当一个元素具有position:absolute时，它将与position:relative一起绝对定位到祖先，而不是父元素（如果父元素没有position:relative）。

因此，从您的代码

#container {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.slide {
    height: 100%;
    width: 100%;
    position: absolute;
}

.slide span {
  position:absolute; /* mistake it is positioned absolute to container and not slide*/
  top:0px;
  left:0px;
  color: white;
  font-size: 26px;
}

因此，span不是绝对定位于slide而是container。

正确的方法是在幻灯片中用div添加另一个position:relative并将span放在其中。

#container {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.slide {
    height: 100%;
    width: 100%;
    position: absolute;
}
.slide > div {
    height: 100%;
    width: 100%;
    position: relative;
}

.slide > div > span {
  position:absolute;
  top:0px;
  left:0px;
  color: white;
  font-size: 26px;
}

HTML：

<div class = "container" id = "container">
    <div class="slide" id="slide1"><div><span>Slide 1</span></div></div>
    <div class="slide" id="slide2"><div><span>Slide 2</span></div></div>
    <div class="slide" id="slide3"><div><span>Slide 3</span></div></div>
    <div class="slide" id="slide4"><div><span>Slide 4</span></div></div>
    <div class="slide" id="slide5"><div><span>Slide 5</span></div></div>
</div>

关于javascript - HTML/CSS位置绝对的子代不会与位置绝对的父代一起移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49783287/