嵌套div中的表单文本字段不可点击

我确实经历了其他类似的主题，仍然无法解决我的问题。以下是我的表单代码。嵌套div中的表单文本字段不可点击

<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在所有的类和标识符中是最高的。仍然我的文本区域不可点击。

我知道我必须错过一些小点但不知道它是什么。

帮助将不胜感激。谢谢。

来源

2014-07-10 Debasish Kanhar

您是否尝试过使用Firebug或其他浏览器开发人员工具来查看正在将什么样式等应用于您的输入？ –

检查元素可能会显示其他内容已超过其顶部。 – Popnoodles

你为什么使用z-index？这是一个弹出式窗体吗？ – matt

已更新以反映该解决方案。在评论中张贴的原始小提琴中，页脚窗格的z-index为-2。这也影响了儿童元素。如下面的CSS所示，将z-index从这里改为3后，表单现在就可以点击了。完整的代码在jsfiddle上。

http://jsfiddle.net/cpTZT/2/

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>[email protected]</li> 
       <li>+91-xxxxxxxxxx</li> 
      </ul> 
     </div> 
    </div>

CSS

#footer { 
    position:relative; 
    z-index:3; 
    font-size:0.8em; 
}

的面积在点击的时候我把JS小提琴的原代码，但是当你键入的文本并没有消失。

编辑：修复了正确解决问题的信息。

来源

2014-07-10 12:43:00 abalos

我试过了，但问题依然存在。＃footer-left是#footer的子女 #footer { \t position：relative; \t z-index：-2; \t font-size：0.8em; } –

我们需要更多的上下文来了解当时的问题。也许尝试在订阅类上放一个！重要的标签？ – abalos

http://jsfiddle.net/cpTZT/1/以下是我的代码。请看看它。在脚下有一个表格在谈论。 –

嵌套div中的表单文本字段不可点击

回答

相关问题