私の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の前に#を使用する必要があります。例：
CSS

#example { 背景：黒。 }

HTMLあなたが実装されてきた何

<div id="example></div>

出典

2011-08-17 01:37:58 secretformula

** facepalm **これを思い出してください。 – Schenn

私には何の問題もありません。私は最初の評価ポイントを得ることができてうれしいです：p – secretformula

@secretformula：歓迎です:) – BoltClock

はCSS クラスです。 divをclass="wrapper"などで宣言して、これらのスタイルを適用します。おそらく、これらの特定のスタイルには、input.username,input.password、div.wrapperなど、きめ細かなクラスを指定する必要があります。または、特定の要素に対してのみ実行したい場合は、.接頭辞を#に変更して、classではなく、要素のidと一致させます。

出典

2011-08-17 01:40:33 darvids0n

Yea Secretformulaがそれに答えました。ありがとう、結構です！！！ – Schenn

私のCSSがうまくいかない理由がわからない

答えて

関連する問題