我希望 settingsBox 元素 float 在 Canvas 上方而不是下方。我可以在我的样式表中更改什么以达到预期的结果？
<!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>
最佳答案
首先，你有一点拼写错误，你写了 position: abolute 为你的 fullCanvas 元素，它应该是:
#fullCanvas {
position: absolute;
// your other styles
}
为了使 z-index 工作，您必须将各个元素的位置设置为绝对、固定或相对，这意味着您必须将 settingsBox 设置为 position: relative ，如下所示:
#settingsBox {
position: relative;
// your other styles
}
除此之外你的代码对我来说看起来不错
关于html - 使一个元素漂浮在另一个元素之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7928064/