Abschnitt Überschrift überlappen auf div - CSS Styling

Question

Kann mir jemand helfen, wie das folgende rot in rot zu erreichen?

Von dem, was ich verstehe, ist es eine Div-Überlappung, aber ich kann nicht herausfinden, wie es so zu bekommen.

Answer 1

Fügen Sie den unten genannten Art zu .about-lower

position: relative; 
padding-top: 15px; 

entfernen margin-top: 20px und fügen Sie die folgende Art zu .lower-title-container

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

Aktualisierter JSFiddle-Link ist here.

Answer 2

Eine Methode unter Verwendung von position: absolute

I Polsterung an den Behälter unter Zugabe habe es, um sicherzustellen, nicht mit der Taste überlappen

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 3

html :

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

css:

hinzufügen

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. */ 
}