1

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.

Lando Bunion
  • 25
  • 4
  • `#startButton` vs `.startButton` - is that on purpose? Please, create a [mcve]. – Roko C. Buljan Feb 12 '22 at 12:35
  • I was struggling to import it in js so changed it from a class to an id, it was the only way i could figure out how. If thats the reason for my issue then god bless otherwise it's irrelevant. – Lando Bunion Feb 12 '22 at 12:42

1 Answers1

0

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 class="parent">
  <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%20answer%20your%20question%20why,a%20unit%20other%20than%20percent.

Konstantinos Gallis
  • 956
  • 6
  • 11