요소를 다른 요소 위에 둡니다

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 
}

좋은 t을 본다 o me

출처

2011-10-28 10:37:22 ximi

설정 상자에 다음을 추가해보십시오. position : absolute; 상단 : 0; 왼쪽 : 0; – ximi

요소를 다른 요소 위에 둡니다

답변

관련 문제