CSS menu déroulant div

Question

J'ai une boîte div et un lien sur ma page. J'ai écrit javascript simple qui cache la boîte div au début, puis après avoir cliqué sur le lien, la boîte apparaît à nouveau.

Le problème est que lorsque le div apparaît, il abaisse le contenu ci-dessous. Je voudrais juste qu'il apparaisse "au-dessus" d'eux. Comme un menu déroulant, mais ce n'est qu'une seule balise div.

Voici mon code:

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

Ce lien permet de basculer le div ci-dessous il:

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

Lorsque vous cliquez sur le lien, la case apparaît ou disparaît.

Mes styles actuels:

#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

OK J'ai résolu cela par moi-même. Ces styles de travail (testés dans FF et 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 2

Je dirais que la DIV apparaît a besoin d'une position absolue ou relative et un z-index élevé

Answer 3

de @AvatarKava Ce serait le style de l'élément a. Je pense

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

fera l'affaire.

Answer 4

contenu div.slide-lois {

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

}

contenu div.slide-lois a.toggle-slide-lois {

float: right; 

}

contenu div.slide-lois div {

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

}