要素を別の要素に浮かべる

私は settingsBox 要素をキャンバスの上に置くのではなく、その上に浮かべたいと思います。意図した結果を得るために私のスタイルシートで何を変更できますか?

<!DOCTYPE HTML> 

<html>

    <head>

        

        <script>

function hideSettings() {
    document.getElementById('settingsBox').style.visibility = 'hidden';
}

        </script>

    </head>

    <body align="center">
        
            This site requires html5 etc
        
        <div id="settingsBox" onclick="hideSettings()">
            Settings go in here. Click to hide
        </div>      
    </body>

</html>
0

1 答え

まず、あなたは小さなスペルミスを持っています、あなたはpositionを書きました:あなたのfullCanvas要素を廃止しました。

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

z-indexを動作させるには、それぞれの要素の位置を絶対、固定、または相対に設定する必要があります。つまり、settingsBoxをposition:relativeに設定する必要があります。

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

それ以外は、コードは私によく見えます

3
追加された
これを設定ボックスに追加してみてください:position:absolute;トップ:0;左:0;
追加された 著者 ximi,