简体   繁体   中英

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

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.

For starters, this block of HTML is malformed:

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

Where' the closing </div> for this div?

<div class="slide-out-div">

Also, without the accompanying CSS, it's hard to determine whether that is the problem as well.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM