html - 透明な画像の背後でhtml入力要素を選択可能にする

Question

透明な画像の背後にある要素を選択できるようにしたいのですが、助けてください！

Answer 1

z-index 値を「99」などのより大きな値に変更するだけです。ページ上での外観はまったく同じですが、クリック可能になり、ユーザー入力を受け入れるようになりました。

または、そのようなレイアウトに絶対配置を使用する必要はありません。入力を左マージンと上マージンで配置し、そのコンテナー要素 (および対応する背景画像) に対して配置することができます。

HTML

<header>
    <input id="input" type="text" name="text" />
</header>

CSS

header {
     background:url('your_url') no-repeat;
     display:block;
     width:960px; /* for example... */
     height:200px; /* for example... */
}
#input {
    margin-left:100px; /* for example... */
    margin-top:80px; /* for example... */
}

Answer 2

-1 に設定している入力要素から z-index を削除するだけです。