CODEWITHSUNDEEP
htmlcss
user181351
user181351

Reputation:

Floating an element over another

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>

Upvotes: 0

Views: 6831

Answers (1)

ximi
ximi

Reputation: 596

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

Upvotes: 3

Related Questions