我确实经历了其他类似的主题，但仍然无法解决我的问题。 以下是我的表单代码。
<div id="footer-left">
<div id="subscribe">
<form action="subscribe.php" method="post">
<input type="text" name="name" value="Enter Your Name"/>
<input type="text" name="email" value="Enter Your Email"/>
<input type="submit" value="Subscribe">
</form>
</div>
</div>
以及以下我的 CSS 代码。
#subscribe {
z-index:5;
}
#footer-left {
position:relative;
float:left;
bottom:0px;
width:40%;
height:350px;
background:#f0f0f0;
padding-right:2%;
padding-left:5%;
padding-top:50px;
}
And-index-5 在所有类别和标识符中最高。我的文本区域仍然不可点击。
我知道我一定遗漏了一些小点，但无法知道它是什么。
非常感谢您的帮助。 谢谢。
最佳答案
已更新以反射(reflect)解决方案。在评论中发布的原始 Fiddle 中，页脚 Pane 的 z-index 为 -2。这也影响了子元素。将此处的 z-index 更改为 3 后，表单现在可以点击，如下面的 CSS 所示。完整代码在 jsfiddle 上。
HTML
<body onload="scaleImage()">
<div id="map_header" class="expressWay">
<div id="header_tabs">
<div id="header_left">
<div id="logo_banner"></div>
<div id="logo"><a href="./"><img src="./images/logo-text.png" style="width:100%;height:100%;" /></a>
</div>
<div id="tabs">
<ul class="nav">
<li id="city"><span>City</span>
<div class="dropDown">
<div class="column" style="margin-left:0px"> <a href="#">Bangalore</a>
<a href="#">Chennai</a>
<a href="#">Delhi</a>
<a href="#">Mumbai</a>
<a href="#">Hyderabad</a>
<a href="#">Jaipur</a>
</div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="header_right">
<div id="social_links"> <a href="#" class="social_button" id="fb"></a>
<a href="#" class="social_button" id="twt"></a>
<a href="#" class="social_button" id="gplus"></a>
<a href="#" class="social_button" id="pin"></a>
</div> <a href="#signIn" id="SignIn">Sign In</a>
<img class="dots" src="./images/dots.png" align="center" style="display:inline-block;float:right;margin-right:40px;margin-top:10px;" />
<li id="partner"><span>Partner With Us</span>
</li>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="footer-left">
<div id="subscribe">
<form action="subscribe.php" method="post">
<input type="text" name="name" placeholder="Enter Your Name" />
<input type="text" name="email" placeholder="Enter Your Email" />
<input type="submit" value="Subscribe">
</form>
</div>
</div>
<div id="footer-right-left">
<ul>
<li><b>COMPANY</b>
</li>
<li>About Us</li>
<li>Careers</li>
<li>Legal</li>
<li>Terms & Conditions</li>
<li>Press/Publications</li>
</ul>
</div>
<div id="footer-right-right">
<ul>
<li><b>CONTACT US</b>
</li>
<li>Street No XYX Locality City State,Pincode</li>
<li>query@ananas.in</li>
<li>+91-xxxxxxxxxx</li>
</ul>
</div>
</div>
CSS
#footer {
position:relative;
z-index:3;
font-size:0.8em;
}
当我将原始代码放在 JS Fiddle 上时，该区域是可点击的，但是当您键入时，文本并没有消失。
编辑:修复信息以正确解决问题。
关于php - 嵌套 div 中的表单文本字段不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24676743/