How to stop my button going over the navbar?

The problem that I am facing is that my button is going over my navbar the mistake that I fear is the position: absolute option but I am unable to get any alternative of putting my button in the center of the image.

It's just a simple button with HTML:

<section class="home">
            <img src="assets/Front_Cover.png" alt="" class="home-image-img">
            <button class="home-button">Get Started</button>


And CSS:

.home-button {
    position: absolute;
    bottom: 47%;
    left: 47%;
    padding: 10px;
    background-color: #195154;
    color: white;
    border: 0px;
    border-radius: 6px;
    transition: all 0.2s ease 0s;


Read more here:

Content Attribution

This content was originally published by Atul Anand at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: