html - CSS 下拉 div

Question

我的页面上有一个 div 框和一个链接。我写了一个简单的 javascript，在开始时隐藏了 div 框，然后在单击链接后，该框再次出现。

问题是，当 div 出现时，它会将其下方的内容下推。我希望它只是出现在它们的“上方”。类似于下拉菜单，但这只是一个 div 标签。

这是我的标记:

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

此链接切换其下方的 div:

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

当您单击链接时，该框会出现或消失。

我目前的风格:

#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

@AvatarKava 那将是 a 元素的样式。我认为

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

会成功的。