CSS-drop-down-div

Ich habe eine div-box und ein link auf meine Seite. Ich habe geschrieben, einfache javascript-das blendet die div-box am Anfang, dann nach einem Klick auf den link, der erscheint das Feld wieder.

Das problem ist, wenn das div angezeigt wird, drückt Inhalt Balg es. Ich möchte es nur angezeigt wird "über" Sie. Wie ein drop-down-Menü, aber dies ist nur eine einzige div-tag.

Hier ist mein 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>

Dieser link blendet die div-Balg es:

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

Wenn Sie auf den link klicken, wird das Dialogfeld angezeigt wird oder verschwindet.

Meine aktuellen 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;
}
InformationsquelleAutor Richard Knop | 2010-07-14
  1. 4

    @AvatarKava Das wäre styling das a-element. Ich rechne damit,

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

    wird den trick tun.

    • oops, übersehen, dass die Letzte Referenz auf das Ende 😀 upvoting yours and mine Bearbeiten
    InformationsquelleAutor Robbert
  2. 3

    Ich würde sagen, das erscheinende DIV muss eine absolute oder relative position und einen hohen z-index

    InformationsquelleAutor Robbert
  3. 2

    OK ich das Problem gelöst habe. Diese Stile funktionieren (getestet in FF und 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;
}
    • nur eine Kleinigkeit: Sie brauchen nicht, um ein float-element positioniert ist, absolut.
    InformationsquelleAutor Richard Knop
  4. -1

    Inhalt div.dia-Gesetze {

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

    }

    Inhalt div.dia-Gesetze ein.toggle-slide-Gesetze {

    float: right;

    }

    Inhalt div.dia-Gesetze div {

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

    }

    • Dies ist nur eine Kopie der Antwort von Richard Knop.
    • Stop stehlen Antworten zu gewinnen Ruf-Punkte. Jeder down-Stimmen Sie diesem Kerl.
    InformationsquelleAutor Prashant
Schreibe einen Kommentar