css - 不能将 div 放在相对 div 下面

Question

我的处境很复杂。首先，我有两列，当屏幕变小时，它们会在彼此下面。我的问题是在其中一列中我有一个相对的 div。我想要另一个 div 直接在它下面，但它一直与第一个 div 重叠。

这是我的代码:

<script>
    var timer = setInterval(nextImage, 4000);
    var curImage = 0;
    var numImages = 4;

    function nextImage() {
        var e;
        // remove showMe class from current image
        e = document.getElementById("slideimg" + curImage);
        removeClass(e, "showMe");

        // compute next image
        curImage++;
        if (curImage > numImages - 1) {
            curImage = 0;
        }

        // add showMe class to next image
        e = document.getElementById("slideimg" + curImage);
        addClass(e, "showMe");
    }

    function addClass(elem, name) {
        var c = elem.className;
        if (c) c += " ";  // if not blank, add a space separator
        c += name;
        elem.className = c;
    }

    function removeClass(elem, name) {
        var c = elem.className;
        elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, "");  // remove name and extra blanks
    }
</script>

body,
html {
  height: 100%
}

body {
  background-image: url('img/bg.jpg');
  min-height: 100%;
  background-position: center;
  background-size: cover;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  margin: 0;
}

#content {
  max-width: 1750px;
  margin-left: auto;
  margin-right: auto;
}

* {
  box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 900px) {
  .column {
    width: 100%;
  }
}

.homepage-main-img-wrapper {
  position: relative;
  right: 0;
  left: 0;
  margin: auto;
  height: 100%;
}

.homepage-main-img {
  width: 100%;
  border: 2px solid #194d98;
  outline: 2px solid #0c7d5f;
  position: absolute;
}

.slide {
  border: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

.showMe {opacity: 1;}

<div id="container">
  <div id="content">
    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <div>stuff</div>
      </div>
      <div class="column container2">
        <div class="homepage-main-img-wrapper">
            <img id="slideimg0" class="slide showMe homepage-main-img" src="img/homepage-photos/1.jpg">
            <img id="slideimg1" class="slide homepage-main-img" src="img/homepage-photos/2.jpg">
            <img id="slideimg2" class="slide homepage-main-img" src="img/homepage-photos/3.jpg">
            <img id="slideimg3" class="slide homepage-main-img" src="img/homepage-photos/4.jpg">
        </div>
        <div id="test">
          <div id="instagram-feed" class="instagram_feed">
            <img src="https://via.placeholder.com/300x300/f00" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
            <img src="https://via.placeholder.com/300x300/f00" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
            <img src="https://via.placeholder.com/300x300/f00" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

这是它的样子:

现在，如果我从列中删除 height: 300px(我应该这样做)。然后底部图像被完全覆盖。

如果我现在从 homepage-main-img-wrapper 中删除 height: 100% 并添加 position: relative to instagram_feed 然后我得到这个:

但我的目标是让红色图像位于黑色图像下方，并且无论页面大小如何，始终让它们凝视在那里。我尝试了各种方法，但似乎无法掌握它。 :/

编辑:我用 .slide 类和用于更改图像的脚本更新了代码。我实际上有一个旋转木马，用于我最初剪切代码以节省空间的图像。但这似乎是必要的，因为没有 position: absolute .slide 类似乎无法按预期工作。

Answer 1

从 .homepage-main-img 中删除 position: absolute;。

.homepage-main-img 是绝对定位的，这使它脱离了正常的文档流，即它不会像往常一样占用空间，因此 Instagram 图片在后面滑动

body,
html {
  height: 100%
}

body {
  background-image: url('img/bg.jpg');
  min-height: 100%;
  background-position: center;
  background-size: cover;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  margin: 0;
}

#content {
  max-width: 1750px;
  margin-left: auto;
  margin-right: auto;
}

* {
  box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 900px) {
  .column {
    width: 100%;
  }
}

.homepage-main-img-wrapper {}

.homepage-main-img {
  width: 100%;
  border: 2px solid #194d98;
  outline: 2px solid #0c7d5f;
}

.instagram-img {
  margin: 0.5% 0.5%;
  width: 32.333333%;
  float:left;
}

<div id="container">
  <div id="content">
    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <div>stuff</div>
      </div>
      <div class="column container2">
        <div class="homepage-main-img-wrapper">
          <img class="homepage-main-img" src="https://via.placeholder.com/600x400/000">
        </div>
        <div id="test">
          <div id="instagram-feed" class="instagram_feed">
            <img src="https://via.placeholder.com/300x300/f00" class="instagram-img">
            <img src="https://via.placeholder.com/300x300/f00" class="instagram-img">
            <img src="https://via.placeholder.com/300x300/f00" class="instagram-img">
          </div>
        </div>

      </div>
    </div>
  </div>
</div>