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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 HLs设计手写数字识别程序编译通不过
  • ¥15 Stata外部命令安装问题求帮助！
  • ¥15 从键盘随机输入A-H中的一串字符串，用七段数码管方法进行绘制。提交代码及运行截图。
  • ¥15 TYPCE母转母，插入认方向
  • ¥15 如何用python向钉钉机器人发送可以放大的图片？
  • ¥15 matlab（相关搜索：紧聚焦）
  • ¥15 基于51单片机的厨房煤气泄露检测报警系统设计
  • ¥15 路易威登官网 里边的参数逆向
  • ¥15 Arduino无法同时连接多个hx711模块，如何解决？
  • ¥50 需求一个up主付费课程