要素を別の要素にフロートする

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>

出典

2011-10-28 Anonymous

まず、あなたは少しスペルの間違いを持っている、あなたはポジションを書きました：あなたのFullCanvasの要素についてabolute、それは次のようになります。

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

とzインデックスが動作するためにあなたが設定する必要があなたが位置にごsettingsBoxを設定する必要がありますを意味し、絶対的な固定または相対へのそれぞれの要素の位置、：あなたはコードが良いトンに見えるしていることから離れて

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

：このような相対o me

出典

2011-10-28 10:37:22 ximi

これを設定ボックスに追加してみてください。トップ：0;左：0; – ximi

要素を別の要素にフロートする

答えて

関連する問題