Question

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

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

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

非常感谢帮助。感谢。

Answer 1

已更新以反映解决方案。在评论中发布的原始小提琴中，页脚窗格的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上时，该区域是可点击的，但是当您输入时，文本并没有消失。

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

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

1 个答案: