Question

所以我必须在很短的时间内创建这个启动页面。它完成了将所有图像...等（它的废话，我知道。但需要上升和seo不重要）

问题是输入被放置在图像顶部的“绝对”和IE中（当然IE !!）表单输入不是真正可点击的。

link：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;}

Answer 1

将表单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('.'); 。

Answer 2

您是否查看了CSS z-index attribute？

投入隐藏在图像背后

2 个答案: