5

あなたは私の問題を見ることができます：

ここに画像の説明を入力してください

http://i.stack.imgur.com/cGoEU.png

その画像は私のログインフォームを覆っています。テキストボックスの後ろに移動してサインインボタンを表示するにはどうすればよいですか？

これは私のコードです：

<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; top: 155px; left: 480px; width:auto; height:auto;">
<input type="text" class="tb7" value="Username" style="margin-left: 563px" 
    maxlength="20" onfocus="if(this.value == 'Username') {this.value='';}" />         
</br>
<input type="text" class="tb8"  value="Password" style="margin-left: 563px;"   
    maxlength="20" onfocus="if(this.value =='Password') {this.value='';}"/>
<input type="image" height="25px"   width="67px" style="vertical-align:top;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />
4

7 に答える 7

8

style="z-index:-5;" で試してください。相対位置または絶対位置

于 2012-07-15T01:44:34.207 に答える
3

これを行う最も簡単な方法は、CSS の z-Index を使用することです。基本的に、要素のスタック位置を定義します。数字が大きいほど、他の要素が上にあります。これらの入力フィールドのトップ HTML が提供されていないため、これを行う方法について具体的な例を示すことはできませんが、さらにコードを提供していただければ、さらにお手伝いさせていただきます。

于 2012-07-15T01:43:35.687 に答える
2

入力を div でラップし、背景の画像でスタイルを設定します。

于 2012-07-15T01:45:16.873 に答える
1

試す：

<div id="form_wrapper" style="background-image:url('img/yellow.png');">
<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; top: 155px; left: 480px; width:auto; height:auto;">
<input type="text" class="tb7" value="Username" style="margin-left: 563px" 
    maxlength="20" onfocus="if(this.value == 'Username') {this.value='';}" />         
</br>
<input type="text" class="tb8"  value="Password" style="margin-left: 563px;"   
    maxlength="20" onfocus="if(this.value =='Password') {this.value='';}"/>
<input type="image" height="25px"   width="67px" style="vertical-align:top;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />
</div>

楽しんで頑張ってください！

于 2012-07-15T21:02:09.343 に答える
1

オレンジ色の四角形が HTML にどのように収まるかはわかりませんがz-index、style 属性に追加できる style プロパティを使用して、要素を他の要素の前または後ろに配置できます。

詳細については、http: //htmldog.com/reference/cssproperties/z-index/を参照してください。

于 2012-07-15T01:42:28.320 に答える
1

css で z-indexes を設定する必要があります。

<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; z-index: 50; top: 155px; left: 480px; width:auto; height:auto;">


<input type="text" class="tb7" value="Username" style="margin-left: 563px; z-index: 50;position: relative;" maxlength="20"
    onfocus="if(this.value == 'Username') {this.value='';}" />      
</br>

<input type="text" class="tb8"  value="Password" style="margin-left: 563px; z-index: 50;position: relative;"   maxlength="20"
    onfocus="if(this.value =='Password') {this.value='';}" />

<input type="image" height="25px"   width="67px" style="vertical-align:top; z-index: 50; position: relative;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />

z-index を使用するには、デフォルトの位置を使用したい場合でも、私が行ったように位置を指定する必要があることに注意してください。

于 2012-07-15T01:44:52.500 に答える
0

背景として「グラデーション ボックス」を使用している場合は、代わりに同様の効果を得るために CSS の使用を検討する必要があります。

于 2012-07-16T22:39:43.823 に答える