html - 如何使标题内容响应(小屏幕时在内容 div 顶部堆叠标题图像)

Question

我有一个带有背景图片的 div(它是我页面的标题)。在此背景图像之上，我放置了一个不透明层，其中包含一些文本。我的问题是当我将屏幕尺寸调整为较小的屏幕时此文本的行为方式:

我的目标是让图像 div(主容器)堆叠在内容 div 的顶部，以便有两个单独的行，但只能从特定(小)屏幕尺寸。

此刻，这两个容器相互重叠。

谁能告诉我如何解决这个问题？除了“显示: block ”之外，我可以使用什么属性(在我的媒体查询中)？这是我到目前为止的代码(这可能很糟糕，因为我对此很陌生):

(仅供引用:我无法访问网站的头部。)

<style type="text/css">.maincontainer {
  width: 100%;
  height: 500px;
  opacity: 1;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-image: url("xyz.jpg");
}

.headercontent {
  color: white;
  font-weight: bold;
  position: relative;
  z-index: 1;
  text-align: right;
  margin-right: 50px;
  margin-top: 40px;
}

.opacitycontainer {
  background-color: rgba(0, 0, 77, .6);
  position: absolute;
  right: 0;
  top: inherit;
  bottom: inherit;
  height: inherit;
  width: 35%;
  margin-right: 15px;
}

@media screen and (max-width: 640px) {
  .opacitycontainer {
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .opacitycontainer {
    width: 35%;
  }
}

h1 {
  color: rgb(0, 88, 156);
}

</style>

<div class="maincontainer">
  <div class="opacitycontainer">
    <div class="headercontent">
      <div style="text-align: right;">Admission</div>

      <h2>Some text!</h2>

      <div class="boutonbc"><a href="link;" target="_blank">Apply now!</a>
      </div>
    </div>
  </div>
</div>

Answer 1

.container {
  position: relative;
  height: 300px;
  width: 100%;
}
  .background-image {
    height: 100%;
    width: 100%;
    background: #000;
  }
  .text-overlay-container {
    width: 78%;
    background: rgba(255, 255, 255, .5);
    color: #333;
    position: absolute;
    top: 10%;
    left: 11%;
    text-align: center;
  }
@media only screen and (max-width: 400px) {
  .text-overlay-container {
    position: relative;
    background: transparent;
    width: 100%;
    top: 0;
    left: 0;
  }
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="maincontainer">
  <div class="opacitycontainer">
    <div class="headercontent">
      <div style="text-align: right;">Admission</div>

      <h2>Some text!</h2>

      <div class="boutonbc"><a href="link;" target="_blank">Apply now!</a>
      </div>
    </div>
  </div>
</div>