Home/ Questions/Q 6743391
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:57:20+00:00

I would like the settingsBox element to float over the canvas rather than below

  • 0

I would like the settingsBox element to float over the canvas rather than below it. What can I change in my style sheet to achieve the intended result?

<!DOCTYPE html> 

<html>

    <head>

        <style>

            body {
                text-align: center;
                margin: 0px;
            }

            #fullCanvas {
                width: 100%;
                height: 100%;

                background-color: blue;
                z-index: 0;
            }

            #settingsBox {
                width: 400px;
                height: 400px;
                z-index: 1;

                border: 2px solid black;
                background-color: lightgrey;

                padding-left: 0;
                padding-right: 0;
                margin-left: auto;
                margin-right: auto;
                margin-top: 25px;
            }

        </style>

        <script>

function hideSettings() {
    document.getElementById('settingsBox').style.visibility = 'hidden';
}

        </script>

    </head>

    <body align="center">
        <canvas id="fullCanvas">
            This site requires html5 etc
        </canvas>
        <div id="settingsBox" onclick="hideSettings()">
            Settings go in here. Click to hide
        </div>      
    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, you have a little spelling mistake, you wrote position: abolute for your fullCanvas element, it should be:

    #fullCanvas {
    position: absolute;
    // your other styles
}

    and in order for z-index to work you have to set the position of the respective elements to absolute, fixed or relative, that means you will have to set your settingsBox to position: relative like this:

    #settingsBox {
    position: relative;
    // your other styles
}

    apart from that you’re code looks good to me

    • 0