绝对容器中的绝对定位

Question

我正在尝试在其上方放置带有文字的横幅。 通常我会在相对容器中有绝对内容，但我当前的横幅是使用绝对定位。 我尝试了另一个相对容器来包裹它，但横幅消失了。 任何人都知道如何在绝对容器内进行绝对定位？

  <div class="product-banner">
    <div class="banner-content">
      <h2>LOREM IPSUM</h2>
      <p>LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM</p>
      <button>WATCH VIDEO</button>
    </div>
  </div>

/ CSS /

.product-banner {
    margin: 7px 0 0 0;
  position: relative;
}

.product-banner img {
  display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.banner-content {
    position: absolute;
  // left: 595px;
  left: 30%;
  top: 220px;
  width: 435px;
}

.re-cont {
position: relative;

}

.banner-content h2 {
  color: #007078;
  font-size: 1.75rem;
  font-weight: 300;
}

.banner-content p {
  font-size: 1rem;  
}

.banner-content button {
  background: #6CC049;
  border: none;
  color: #FFF;
  padding: 5px 8px;
}

.product-banner  {
  background: black;
  clear: both;
  height: 100%;
  margin-bottom: 200px;
  max-height: 468px;
  position: absolute;
  width: 100%;

  background: url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-1.jpg) no-repeat center center;
  // background-size:cover;

  @media (min-width: 641px) and (max-width: 1025px) {
    background: url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-2.jpg) no-repeat center center;
    // background-size:cover;
  }

  @media (min-width: 1025px) and (max-width: 1500px) {
    background: url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-3.jpg) no-repeat center center;
    // background-size:cover;
  }

  @media (min-width: 1500px) {
    background: url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-4.jpg) no-repeat center center;
    // background-size:cover;
  }
}

.product-content {
  position: relative;
  top: 443px;
}