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