Javascript 确保div始终低于绝对定位div

我目前正在开发一个单页react应用程序。应用程序的顶部包含一个带有行动调用的英雄图像。我希望应用程序的其余部分位于顶部下方。我遇到的问题是container background div是绝对定位的；因此，我似乎无法找到一种方法来确保我的应用程序的下半部分始终位于它下面

编辑****我相信问题在于图像，但我不确定如何确保容器和图像始终保持相同大小

我的jsx代码如下：

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <>
    <div className='container'>
      <div className='container-background'>
        <img
          id='rob'
          src='https://i.imgur.com/iyFtMNA.jpg'
          alt='bg'
          className='container-background-img'
        />
      </div>
      <div id='content' className='content'>
     {/*  nav and CTA will go inside of here */}
      </div>
    </div>
    {/* I would like this section to be below the image!!!! */}
    <div>hello</div>
  </>
  );
}

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}
.container .container-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.25;
}

.container-background-img {
  width: 100%;
  position: relative;
}

.container .content {
  position: relative;
  z-index: 1;
}

.app-outer {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  padding: 0rem 1rem;
}

@media only screen and (max-width: 1170px) {
  .container-background-img {
    height: 656px;
    object-fit: cover;
  }
}

@media only screen and (max-width: 768px) {
  .container-background-img {
    height: 653px;
    object-fit: cover;
  }
}

---

附件是调试的以下链接

使

.container background

的高度固定，并使用

calc（）

从

100%

中减去该高度-您将得到您想要的。只需将“下面的内容”包装在

div

中即可

<div>
    {/* I would like this section to be below the image!!!! */}
</div>

---

通过移除

位置：绝对

从您的

.container后台

添加

导航栏

和

cta

的CSS。您的代码工作正常：

代码沙盒：

代码更改：

.container .container-background {
  opacity: 0.25;
}

代码添加：：

/* CODE ADDED */
#navbar {
  position: absolute;
  top: 0;
}

#content {
  position: absolute;
  top: 20px;
}

---

我真的不想给容器背景一个固定的高度，因为我正在努力保持响应。我测试了这个解决方案，但它似乎没有达到预期效果。嗯，这是下一次的主题。。。无论如何，就我个人而言，我只会使用一个

文档。getElementByClassName（'container-background'）。clientHeight

，不会为css操心。我注意到的是，一旦导航栏和欢迎组件有了具有绝对定位的父组件。他们不再遵守最大宽度等。是否有办法给他们最大宽度使用

左：0
右；0;顶部：0需要全宽：）
/* CODE ADDED */
#navbar {
  position: absolute;
  top: 0;
}

#content {
  position: absolute;
  top: 20px;
}