この入力ファイルをクリックできないのはなぜですか？

Question

HTML：

<div id="mainSignup"> 
    <form id="signup"> 
    <div id="menu"> 
     <div id="username_enter"> 
      <label for="username">Username: </label> 
      <input type ="text" id="username" maxlength="10" placeholder="10 Characters Only"> 
     </div> 
     <div id="password_enter"> 
      <label for="password">Password: </label> 
      <input type ="password" id="password" maxlength="50" placeholder="50 Characters Only"> 
     </div>   
    </div> 
    </form> 
</div> 

CSS：

label { 
    font-family: "Comic Sans MS", cursive, sans-serif; 


} 

input { 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    font-size: 15px; 
} 

#username_enter { 
    padding: 20px; 
    position: absolute; 
    top: 25%; 
    left: 50%; 
    margin: -70px 0 0 -170px; 

} 

#password_enter { 
    padding: 10px; 
    position: absolute; 
    top: 10%; 
    left: 53%; 
    margin: -70px 0 0 -170px; 

} 

#username { 
    margin-top: 40px; 
} 

#password { 
    margin-top: 160px; 
} 



#menu { 
    border-radius:11px; 
    height:300px; 
    width:500px; 
    border:6px solid black; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%,-50%); 
    background-color:white; 
} 

なぜユーザ名の入力がクリックできないではないのですか？

あなたが単語usernameに時刻を合わせても、それはクリック可能ではありません。

この質問が11歳未満のため、ひどく書かれていても驚かないでください。

Answer 1

あなたは（「クリック」することはできません）username入力と対話することはできません。すぐにあなたの問題を解決するだろうCSSに以下の行を追加します。

#username_enter { 
    ... your current css rules 
    z-index: 99; 
} 

しかし、それはこのような単純な例では非常に多くのabsoluteを使用するのは良い考えではありません。あなたが望むものを実現するためにプレーンマージン/パディングを使用することを検討してください。

Answer 2

aaaabbbbccccdddddeeeee

ラベル・タグはクリックできませんので。あなたが使用する必要がありますか、それは#password_enter div要素によってマスクされているので、<button>または<a>