不能将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>

是这样的：

现在，如果我从列中删除高度：300px（我应该这样做）。然后底部的图像被完全覆盖。

如果我现在从homepage-main-img-wrapper中删除高度：100％并添加相对于instagram_feed的位置：那么我得到了：

但是我的目标是无论页面大小如何，都将红色图像置于黑色图像之下，并始终使它们凝视。我尝试了各种方式，但似乎无法解决问题。 ：/

编辑：我使用.slide类和用于更改图像的脚本更新了代码。实际上，我为原来剪切的代码有一个轮播，以节省空间。但这似乎是必要的，因为没有位置：绝对.slide类似乎无法按预期工作。

Answer 1

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

.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>