Sliding panel in the middle of the page. Z-index given not working
- by Nehal Rupani
Hi all,
I am implementing sliding panel element but problem is when i slide out other div element is floating down.
I guess and tried to give z-index to element which i am sliding but it doesn't seems to work.
Let me put code for both div.
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
This is div which i am sliding in and out and beneath is code of effective div.
<div class="askform">
<p class="titletext">Ask an Expert Trade Forum</p>
<p class="detailtext">WD-40’s leading source for DIY tips and tricks.</p>
<span>
<form id="askform" name="askform" action="" method="post">
<span class="left"><input name="input" type="text" class="askinputbox"/></span><span class="marginleft"><input type="image" src="images/search_icon.gif" /></span>
</form>
</span>
<div class="followus">
<span class="followtext">Follow us on</span><span class="right"><img src="images/bookmark.jpg" width="121" height="45" alt="Bookmark" /></span>
</div>
</div>
Sliding div is in left portion of the page and effective div is in right portion of the page.
I guess something with z-index, positioning element and overflow properties will do something.
