Przemysław Lunic Przemysław Lunic - 4 months ago 20
CSS Question

Overlapping divs and spacer

divs

Hi! I'm having this situation infront of me, I'm trying to achieve something like this:

divs2

My code looks like this:

<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>


and my css:

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


My backgroud css code looks like this:

.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;
}


Although I can see it with inspect tool I can't get my spacer on top of the background (and background image). I have look through plenty of sites but the most hard thing for me is putting it in words together. Thanks for help

Answer

Please try this:

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