Question

我正在尝试在HTML / CSS / Javascript中实现滑动的carousal。我有5张幻灯片，每张幻灯片都是100％宽度和高度的div。在javascript中，我水平排列5个div，设置第一个幻灯片填充屏幕，另外4个屏幕外。我使用.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中看到的那样，父幻灯片和子跨距的位置都设置为绝对。这不应该意味着跨度随着滑动而移动吗？

Answer 1

当一个元素具有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>

Answer 2

看起来你的CSS代码运行正常，但你的jQuery代码有问题。您的代码未将幻灯片放在屏幕外。试试这段代码，了解我的意思。如果你的jQuery代码正常工作，你的滑块就可以正常运行。

#slide1 {background: blue;}
#slide2 {background: green; left: -100%;}
#slide3 {background: red; left: -200%;}
#slide4 {background: yellow; left: -300%;}
#slide5 {background: brown; left: -400%;}

Answer 3

position：absolute根据浏览器维度呈现dom。如果您希望子元素与父元素一起移动尝试将position:absoulte设置为父级，将position:relative设置为子元素。

在您的代码中，尝试更改

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

.slide span {
  position:relative; //if this is the child to be relative
  top:0px;
  left:0px;
  color: white;
  font-size: 26px;
}

希望这有帮助。

HTML / CSS position-absolute child不随position-absolute parent移动

3 个答案: