Sliding panel in the middle of the page. Z-index given not working

Posted by Nehal Rupani on Stack Overflow See other posts from Stack Overflow or by Nehal Rupani
Published on 2010-04-27T07:08:24Z Indexed on 2010/04/27 7:13 UTC
Read the original article Hit count: 231

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about jQuery