CSS drop down div

Question

I have a div box and a link on my page. I have written simple javascript that hides the div box at the beginning, then after clicking the link, the box appears again.

The problem is, when the div appears, it pushes down contents bellow it. I would like it to just appear "above" them. Like a drop down menu but this is just a single div tag.

Here is my markup:

  <div class="slide-heading">
<div class="slide-laws">
 <a href="#" class="toggle-slide-laws accessible-link"><img src="/images/paragraph.jpg" alt="paragraph"></a>
                <!-- THE LINK TOGGLES THE DIV BELLOW -->
 <div>
  <a href="/clientarea/utils/law/id/2832" rel="external-new-window" style="color: #ba8800;"><strong>124/2006 - O bezpečnosti a ochrane zdravia pri práci a o zmene a doplnení niektorých zákonov</strong></a><br />
  <a href="/clientarea/utils/law/id/2832/p/2/a/1" rel="external-new-window">§2, odsek 1</a><br />
  <a href="/clientarea/utils/law/id/2832/p/2/a/2" rel="external-new-window">§2, odsek 2</a><br />

  <a href="/clientarea/utils/law/id/2832/p/5/a/2" rel="external-new-window">§5, odsek 2</a><br />
 </div>
</div>
<h3>Kapitola 1</h3>
<p>Slide A</p>
<div class="clear">&nbsp;</div>
  </div>
            <p>I DON'T WANT THIS PARAGRAPH TO BE PUSHED DOWN WHEN THE BOX APPEARS.</p> 

This link toggles the div bellow it:

<a href="#" class="toggle-slide-laws accessible-link"><img src="/images/paragraph.jpg" alt="paragraph"></a>

When you click on the link, the box appears or disappears.

My current styles:

#content div.slide-laws {
 float: right;
 width: 30em;
 line-height: 1.3em;
 font-size: .9em;
}
#content div.slide-laws a.toggle-slide-laws {
 float: right;
}
#content div.slide-laws div {
 text-align: left;
 float: left;
 margin-bottom: 4px;
}

Answer 1

I'd say the appearing DIV needs an absolute or relative position and a high z-index

Answer 2

@AvatarKava That would be styling the a element. I reckon

#content div.slide-laws div
{
    z-index: 9999;
    position: absolute;
    top: 0px;
    right: 0px;
}

will do the trick.

Answer 3

OK I solved this by myself. These styles work (tested in FF and IE):

#content div.slide-laws {
    float: right;
    width: 30em;
    line-height: 1.3em;
    font-size: .9em;
}
#content div.slide-laws a.toggle-slide-laws {
    float: right;
}
#content div.slide-laws div {
    text-align: left;
    float: left;
    z-index: 99999;
    position: absolute;
    top: 4em;
    right: 0;
    background: #eee;
    border: 1px solid #ccc;
    padding: 1em;
}

Answer 4

content div.slide-laws {

float: right;
width: 30em;
line-height: 1.3em;
font-size: .9em;

}

content div.slide-laws a.toggle-slide-laws {

float: right;

}

content div.slide-laws div {

text-align: left;
float: left;
z-index: 99999;
position: absolute;
top: 4em;
right: 0;
background: #eee;
border: 1px solid #ccc;
padding: 1em;

}