Überlappende divs und spacer

Question

Hallo! Ich bin diese Situation vor mir haben, ich versuche, so etwas zu erreichen:

Mein Code sieht wie folgt aus:

 <div class="about-me"> 
      <div class="aboutme-icon-holder"> 
       <img class="aboutme-icon" src="aboutme-icon.png" alt=""> 
      </div> 
      <div class="spacer"></div> 
      <div class="aboutme-link-holder"> 
       <a class="aboutme-link" href="#">ABOUT ME</a> 
      </div> 
     </div> 

und meine css:

.spacer{ 
float:left; 
display: flex; 
content:""; 
width:300px; 
height:5px; 
color: white; 
margin: auto; 
z-index: 2; 
} 

sieht My backgroud CSS-Code wie folgt aus:

.about-me{ 
float: left; 
width:300px; 
height:300px; 
margin-right: 32px; 
background: #1cb459; 
background-image: url("aboutme-aboutme-overlay.png"); 
display: block; 
position: relative;; 
z-index: 1; 
} 

Obwohl ich es mit Inspect-Tool sehen kann, kann ich meine Abstandhalter nicht über den Hintergrund (und Hintergrundbild) bekommen. Ich habe viele Seiten durchgesehen, aber das Schwierigste für mich ist es, es zusammen in Worte zu fassen. Vielen Dank für die Hilfe

Answer 1

Bitte versuchen Sie dies:

.spacer { 
    background-color: #fff; 
    color: white; 
    content: ""; 
    display: flex; 
    float: left; 
    height: 5px; 
    margin: auto; 
    position: absolute; 
    top: 50%; 
    width: 300px; 
    z-index: 2; 
}