Ich versuche, ein div-Element über einer Leinwand (es ist für ein Spiel) in der Mitte meiner Seite zu platzieren. Es handelt sich um einen Startbildschirm, den ich über der Leinwand zeigen möchte, bevor ich das Spiel starte (dieser Startbildschirm enthält Optionen wie "Spiel spielen", "Einstellungen" usw.). Das Problem ist, dass ich das nicht hinbekomme, ich habe viel bei Google gesucht, ich habe viele Beispiele gesehen, aber keine davon scheint für mich zu funktionieren. Hier ist mein Code:

<div id="gamecontainer">
            <canvas id="myCanvas" width="800" height="600">
                Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game!
            </canvas>

            <div id="gamestartscreen" class="gamelayer">
                <img src="images/icons/play.png" alt="Play Game" onclick="alert('ceve');"><br>
                <img src="images/icons/settings.png" alt="Settings">
            </div>
</div>

Hier ist das CSS:

#gamecontainer {
    width: 800px;
    height: 600px;
    background-color: beige;
    border: 1px solid black;
    position: relative;
    margin: 0 auto;
}

.gamelayer {
    width: 800px;
    height: 600px;
    position: absolute;
    display: none;
    z-index: 0;
}


/* Screen for the main menu (Like Play, Settings, etc.) */
#gamestartscreen {
    position: relative;
    margin: 0 auto;
}

#gamestartscreen img {
    margin: 10px;
    cursor: pointer;
}

Könnte mir bitte jemand sagen, wo ich es falsch mache?