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

时间:2011-10-28 10:29:23

标签: html css

我希望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>

1 个答案:

答案 0 :(得分:3)

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

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

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

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

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