隱藏在圖像後面的輸入

所以我不得不在很短的時間內創建這個啓動頁面。它的完成將所有的圖像..等（它的廢話，我知道，但需要上去，SEO是不重要的）隱藏在圖像後面的輸入

問題是投入被放置在圖像頂部的「絕對」和IE IE !!）表單輸入不是真正可點擊的。

鏈接：savemoneytampa.com

HTML：

<div id="container"> 
    <form name="form" method="post" action="#"> 
     <label for="total_card_sales" class="calcLabel">Total Card Sales</label> <input id="total_card_sales" type="text" value="0" /> 
     <label for="total_deposits_received" class="calcLabel">Total Deposits Received</label> <input id="total_deposits_received" type="text" value="0" /> 
     <label for="total_processing_cost" class="calcLabel">Total Processing Cost</label> <input id="total_processing_cost" type="text" value="0" disabled="disabled" /> 
     <label for="total_processing_cost2" class="calcLabel">Total Processing Cost</label> <input id="total_processing_cost2" type="text" value="0" disabled="disabled" /> 
     <label for="total_card_sales2" class="calcLabel">Total Card Sales</label> <input id="total_card_sales2" type="text" value="0" disabled="disabled" />  

    </form> 
    <div id="epr">0%</div> 
    <img src="1.png" /> 
    <img src="2.png" /> 
    <img src="3.png" /> 
    <img src="4.png" /> 
    <a href="index2.html"><img src="5.png" /></a> 
    <img src="6.png" />  
</div>

CSS：

img { border-collapse: none; display: block; z-index: 1; position: relative;} 
body { background: url(bg.png) repeat-x; } 
#container { width: 936px; margin: 0 auto; position: relative; z-index: 1;} 
form { position: absolute; } 
label { display: none; } 
input { border: none; background: transparent; width: 145px; height: 22px; font-size: 18px; z-index: 999; } 
input#total_card_sales { position: absolute; top: 426px; left: 178px; } 
input#total_deposits_received { position: absolute; top: 426px; left: 390px; } 
input#total_processing_cost { position: absolute; top: 426px; left: 575px;color: #00395a; } 
input#total_processing_cost2 { position: absolute; top: 500px; left: 178px; color: #00395a;} 
input#total_card_sales2 { position: absolute; top: 500px; left: 390px; color: #00395a; } 
#epr { color: #00395a; font-weight: bold; font-size: 30px; position: absolute; top: 567px; left: 535px; font-family: arial;}

來源

2009-09-07 Roeland

設置z-index的形式2

form { position: absolute; z-index: 2}

編輯：

好吧，它不是關於z-index。 IE對透明背景的字段有問題。他們變得部分不可點擊（只有文字的一面可點擊）。

要修復它，用這個

input { border: none; background-color: transparent; background-image: url('.'); width: 145px; height: 22px; font-size: 18px; z-index: 999; }

增加的部分是background-image: url('.');。

來源

2009-09-07 21:41:31 Aziz

沒有修復它:( – Roeland 2009-09-07 22:11:04

好吧，我看到問題..答案更新 – Aziz 2009-09-07 22:34:40

awsome。that that fix the problem :) – Roeland 2009-09-08 05:08:09

你調查過CSS z-index attribute？

來源

2009-09-07 21:36:32 Amber

嗯，我已經在使用z-index了。我有z-index：1;圖像和z-index：輸入上的999。 – Roeland 2009-09-07 21:41:57

隱藏在圖像後面的輸入

回答

相關問題