duanheyi7147
2014-07-10 12:36
浏览 60
已采纳

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

I did go through other similar topics and still was unable to solve my problem. The following is my form code.

<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>

And the following my css code.

#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 is highest among all classes and identifiers. Still my text area is not clickable.

I know I must be missing some small point but unable to know what it is.

And help would be highly appreciated. Thanks.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dqkmn26444 2014-07-10 12:43
    已采纳

    Updated to reflect the solution. In the original Fiddle posted in the comments, the z-index of the footer pane was -2. This was affecting the child elements as well. The form is now clickable after changing the z-index here to 3 as shown in the CSS below. Full code is on the 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;
    }
    

    The area was clickable when I put the original code on JS Fiddle, but when you typed, the text did not disappear.

    EDIT: Fixed the information to properly address the question.

    点赞 评论

相关推荐 更多相似问题