div标题重叠 - CSS样式

Question

任何人都可以帮我解决如何以红色显示以下所示的内容吗？

根据我的理解，这是一个div重叠，但我似乎无法弄清楚如何得到它。

Answer 1

使用position: absolute

的一种方法

我在下面的容器中添加了填充，以确保它不与按钮重叠

body {
  font-family: "Helvetica", sans-serif;
  margin: 0px 0px 0px 0px;
}

.header-img-container {
  background-image: url(../Images/about-header-img.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  height: 330px;
  width: 100%;
}

.header-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.about-middle {
  text-align: left;
  margin: auto;
  width: 80%;
}

.about-middle-text {
  line-height: 1.3;
  margin-bottom: 50px;
  margin-top: 40px;
}

.about-middle-text h2 {
  margin-top: 60px;
  margin-bottom: 40px;
}

.about-middle-text p {
  margin-bottom: 14px;
  font-size: 14px;
}

.about-lower {
  background-color: #FAF8F8;
  text-align: left;
  padding-bottom: 30px;
}

.lower-title-container {
  width: 80%;
  text-align: center;
  vertical-align: middle;
  margin: auto;
  margin-top: 20px;
  z-index: 10;
  position: relative;
}

.lower-title {
  width: 150px;
  height: 50px;
  background-color: #b2b0c5;
  color: white;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -25px;
}

.lower-title p {
  font-weight: 100;
  font-size: 20px;
  vertical-align: middle;
}

.about-eagles-container {
  margin-top: 40px;
}

.about-eagles {
  border-bottom: 1px solid lightgray;
  padding-bottom: 20px;
  display: flex;
  width: 80%;
  align-items: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 50px;
}

.eagle-img-container {
  margin-right: 30px;
  height: 150px;
  width: 150px;
}

.eagle-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.eagle-img-container:hover {
  background-color: rgba(225, 231, 242, 0.8);
}

.eagle-name {
  margin-bottom: 30px;
  font-weight: bold;
}

<div class="about-middle">
  <div class="about-middle-text">
    <h3>Rising Eagles</h3>
    <p>Lorem ipsum dolor sit amet, populo vocent perfecto has in, phaedrum aliquando omittantur mei in, evertitur intellegebat eum ut. Vel ea nulla mentitum. Id aeterno minimum sea, at est albucius scaevola consequat. Duo facer platonem expetendis eu, eu
      quando aliquip constituam sed. Ne invenire suavitate vulputate mei. Vestibulum mi sapien ac nunc vel. Pellentesque nec elit sit ac orci. Ut lectus venenatis eros diam, pellentesque natoque amet lectus felis, cursus laoreet blandit ut nulla vel libero.
      Venenatis tristique cras, ut vitae, lectus ornare enim, sapien luctus lacinia, aliquam nibh libero tincidunt ut. Commodo risus amet vivamus, molestie mattis at. Mauris massa, vitae dolor etiam sed. Sit mi dignissim elementum, sit nulla nec arcu
      in arcu, reprehenderit sem donec magna, nisl urna non, venenatis turpis risus duis ultrices. </p>


    <p> Vitae consul quodsi ea sea, ex graeci accusam copiosae sit. Ei error accumsan mel. Quo id populo melius ceteros. Ex per magna aliquam, eos scripta integre ex. Praesent in eu tincidunt. Commodo magni porta nonummy aliquam enim neque, dapibus phasellus
      sed volutpat, dui quam, parturient molestie ante massa bibendum. Pharetra in ut, aliquam pretium rutrum pretium luctus phasellus. Enim sem cras interdum, at dolor in.</p>
  </div>
</div>

<div class="about-lower">
  <div class="lower-title-container">
    <div class="lower-title">
      <p>The Eagles</p>
    </div>
  </div>
  <!-- Iterate over accounts and build div for each -->
  <div class="about-eagles-container">
    <div class="about-eagles">
      <div class="eagle-img-container">
        <!-- Change url to link to their personal page -->
        <a href="#"><img src="../Images/profile-img1.jpg" class="eagle-img"></a>
      </div>
      <div class="eagle-text">
        <p class="eagle-name">Charlie</p>
        <p>Lorem ipsum dolor sit amet, nec no errem euismod ponderum. Pro no populo putant audire.</p>
      </div>
    </div>
    <div class="about-eagles">
      <div class="eagle-img-container">
        <img src="../Images/profile-img2.jpg" class="eagle-img">
      </div>
    </div>
  </div>
</div>

Answer 2

将以下提到的样式添加到.about-lower

position: relative;
padding-top: 15px;

删除margin-top: 20px并将以下样式添加到.lower-title-container

position: absolute;
top: -26px;
left: 73px;

更新后的JSFiddle链接为here。

Answer 3

HTML：

<!-- i put the button above the first div -->
<input id="btn" type="button" value="the button"/>
<div class="about-middle">

的CSS：

添加

body {
    position: relative;
}
#btn {
    left: 75px;
    margin: -25px 0 0 20px;
    position: absolute;
    top: 15px;
}
.about-middle{
    border: solid 1px black; /* so it's visible. */
}