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

【问题标题】：Form text field in nested div not clickable嵌套div中的表单文本字段不可点击
【发布时间】：2014-08-31 20:09:57
【问题描述】：

我确实经历了其他类似的主题，但仍然无法解决我的问题。以下是我的表单代码。

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

我知道我一定遗漏了一些小点，但不知道是什么。

我们将不胜感激。谢谢。

【问题讨论】：

您是否尝试过使用 Firebug 或其他浏览器开发工具来查看您的输入应用了哪些样式等？
检查元素可能会显示其他东西在它的顶部。
为什么要使用 z-index？这是弹出式表单吗？
如果您在 jsfiddle 中重现问题会更好地帮助我们识别问题。

标签： php html css forms nested-forms

【解决方案1】：

已更新以反映解决方案。在 cmets 中发布的原始 Fiddle 中，页脚窗格的 z-index 为 -2。这也影响了子元素。将此处的 z-index 更改为 3 后，该表单现在可以单击，如下面的 CSS 所示。完整代码在 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>query@ananas.in</li>
                <li>+91-xxxxxxxxxx</li>
            </ul>
        </div>
    </div>

CSS

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

我把原始代码放在JS Fiddle上的时候，这个区域是可以点击的，但是当你输入的时候，文字并没有消失。

编辑：修正信息以正确解决问题。

【讨论】：

我试过了，但问题仍然存在。 #footer-left 是 #footer #footer { position:relative; 的子级z-索引：-2；字体大小：0.8em； }
我们需要更多的上下文来了解问题所在。也许尝试在订阅类上放置一个 !important 标记？
jsfiddle.net/cpTZT/1 以下是我的代码。请调查一下。在页脚m处有一个表格在谈论。
请见上文。我更改了原始答案以反映实际答案。您唯一需要更改的是#footer 的css。 -2 的 z-index 正在传播给它的孩子。我将其更改为 3，它现在可以在小提琴上使用。