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

Question

我目前正在开发一个单页反应应用程序。应用程序的顶部包含一个带有号召性用语的英雄形象。我希望应用程序的其余部分位于此顶部下方。我遇到的问题是容器背景 div 是绝对定位的；因此，我似乎无法找到一种方法来确保我的应用程序的下半部分始终位于其下方。

EDIT****我认为问题出在图像上，但我不确定如何确保容器和图像始终大小相同

我的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>
  </>
  );
}

我的css如下：

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

附上以下调试链接https://codesandbox.io/s/naughty-lamarr-fdgm1?file=/src/styles.css:0-671

Answer 1

通过从您的.container-background 中删除position:absolute; 并为您的navbar 和cta 添加CSS。您的代码运行良好：

CODESANDBOX： https://codesandbox.io/s/issue-react-mnn6u?file=/src/styles.css:74-127

代码更改：

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

代码添加：:

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

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

Answer 2

固定.container-background 的高度并使用calc() 从100% 中减去该高度 - 你会得到你想要的。只需将您的“下面的内容”包装在 div 中即可。

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

.container-background {
  height: 100px; // change the fixed height accordingly
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.25;
}

.content {
  height: calc(100% - 100px); // change the substracted height accordingly
  position: relative;
  z-index: 1;
}