Question

我希望settingsBox元素浮在画布上而不是它下面。我可以在样式表中更改哪些内容以达到预期效果？

<!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>

Answer 1

首先，你有一点拼写错误，你写了一个位置：abolute for your fullCanvas，它应该是：

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

并且为了使z-index工作，你必须将各个元素的位置设置为绝对，固定或相对，这意味着你必须将settingsBox设置为position：relative，如下所示：

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

除此之外你的代码对我来说很好看

将元素浮动到另一个元素上

1 个答案: