HTML/CSS position-absolute child 不与 position-absolute parent 一起移动答案

【问题标题】：HTML/CSS position-absolute child does not move with position-absolute parentHTML/CSS position-absolute child 不与 position-absolute parent 一起移动
【发布时间】：2018-09-21 19:46:12
【问题描述】：

我正在尝试在 HTML/CSS/Javascript 中实现滑动轮播。我有 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 中看到的，父幻灯片和子跨度都将位置设置为绝对。这不应该意味着跨度随着幻灯片移动吗？

【问题讨论】：

一切看起来都不错，既然如此，您需要提供一个工作代码 sn-p 来重现该问题。

标签： javascript jquery html css

【解决方案1】：

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;
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您的 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%;}

【讨论】：

你为什么要revertsyntax highlighting语言提示？目前，您的 CSS 代码都是灰色的，但适当的语法突出显示将通过以蓝色显示属性和以黑色显示值来使其更易于阅读。