내 CSS가 작동하지 않는 이유를 알 수 없음

텍스트 상자를 적절한 위치에서 캔버스 위에 놓으려고합니다.내 CSS가 작동하지 않는 이유를 알 수 없음

ID를 사용하여 CSS를 구현하면 작동하지 않습니다. 그러나 CSS에서 html 요소를 대신 지정하면 작동합니다. (그래도 고유 한 텍스트 상자를 조작 할 수는 없습니다.) (캔버스 태그로 시연)

리틀 도움말?

<style type="text/css"> 
canvas { position:absolute; 
z-index:-1; 
top:0px; 
left:100px; 
} 

.wrapper{ height:100%; 
width:100%;     
} 

.username { position:absolute; 
top:200px; 
left:150px; 
visibility:hidden; 
z-index:1; 
} 

.password { position:absolute; 
top:300px; 
left:150px; 
visibility:hidden; 
z-index:2; 
} 

</style> 

</head> 
    <body> 
      <div id="wrapper"> 
       <canvas id = "gamescreen" height = "800" width = "800"></canvas> 
       <input type="text" name="username" id="username" /> 
       <input type="password" name="password" id="password" /> 
      </div> 
    </body>

출처

2011-08-17 Schenn

문제는 . 선택이 클래스에서 작동한다는 것입니다. ID를 사용하여 요소를 선택하려면 # ID의 infront를 사용해야합니다. 예 :
CSS

# 예제 { 배경 : 검정; }

HTML 이미 구현 한 어떤

<div id="example></div>

출처

2011-08-17 01:37:58 secretformula

** facepalm ** 기억해야합니다. – Schenn

하하 우리 모두 제게 아무런 문제가 없습니다. 첫 번째 평판 포인트를 얻을 수있어서 다행입니다. : – secretformula

@secretformula : 환영합니다 :) – BoltClock

는 CSS 클래스 있습니다. div을 class="wrapper" 등으로 신고하면 해당 스타일을 적용 할 수 있습니다. 또한 특정 스타일에 대해 더 세분화 된 클래스 (예 : input.username, input.password 및 div.wrapper)를 지정해야합니다. 또는 특정 요소에만 적용하고 그 밖의 다른 스타일에서는 다시 사용할 계획이없는 경우 . 접두사를 #으로 변경하여 class이 아닌 id 요소와 일치시킵니다.

출처

2011-08-17 01:40:33 darvids0n

네 Secretatula가 위에 답변했습니다. 그래도 감사합니다!!! – Schenn

내 CSS가 작동하지 않는 이유를 알 수 없음

답변

관련 문제