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