My button is stuck on the Y/vertical axis-CodePudding

I've messed with the display and position style properties but no matter what I try my element is stuck on the vertical axis. I copied the CSS code from a button generator website and all works perfectly, I even added a function to it in javascript but I'm completely stuck on positioning it. I'm only a few weeks into self-teaching myself to code and at the moment javascript is my strong point but obviously, CSS and HTML come in handy too. Any help is appreciated.

#startButton {
    box-shadow: 0px 0px 12px 2px #3dc21b;
    background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Verdana;
    font-size:18px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    position: relative;
    top: 50%;
    left: calc(50% - 30px);
}
.startButton:hover {
    background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color:#5cbf2a;
}
.startButton:active {
    position:relative;
    top:1px;
}

I have the element 'on its own in HTML if that makes any sense, it's not in its own div or head or body. I'm not sure if that makes a difference though. Thanks!

Edit: I've got as far as figuring out the elements don't just overlap like I thought. I've learnt my problem is that the 'space' for the button element is stuck below the canvas. I now need a way to overlap these elements.

CodePudding user response：

The reason is that the parent element (body in your case) does not have a static height.

Therefore you can add a parent element with static height and wrap your #startButton.

Edit your html:

<div >
  <button id="startButton"> #Startbutton </button>
</div>

Add static height to the parent element (e.g. 300px):

.parent {
  height: 300px;
}

Fiddle: https://jsfiddle.net/kongallis/chqn18us/6/

Refer also to: https://stackoverflow.com/questions/9765402/why-is-is-top50-in-css-not-working#:~:text=To answer your question why,a unit other than percent.