To cut a long story short I'm trying to make a green bar move upwards over a blue bar when a button is clicked (although I haven't added any JS yet. For some reason no matter what I try my button will not work. I have tried the button tag and the input tag to make the button and it makes no difference. My code currently stands at this: body { margin: 0; padding: 0; text-align: center; } #container{ z-index: -1; position: relative; background-color: brown; height: 800px; width: 800px; margin: 0 auto; margin-top: 75px; } #fullLoad{ z-index: 1; position: relative; height: 600px; width: 200px; background: blue; left: 300px; top: 100px; overflow: hidden; border-radius: 20px 20px 20px 20px; } #loader{ border-radius: 20px 20px 20px 20px; z-index: 2; position: absolute; height: 600px; width: 200px; background: green; top: 600px; } #btn{ position: absolute; top: 20px; right: 362px; padding: 5px 20px; border-radius: 5px; background: gold; font-family: sans-serif; font-size: 1.8em; color: #424242; } <div id="container"> <div id="fullLoad"> <div id="loader"></div> </div> <input id="btn" type="button" value="Go !" onclick="alert('Hello')"> </div> Login To add answer/comment