✔ Schwebender Div Container?

lisali

lisali

Erfahrenes Mitglied
Hi,

ich möchte so eine Art "Float-Box" machen. Also, man klickt auf einen Link und dann wird dieser Div Container angezeigt, jedoch verschiebt er mir jegliche Div Container, die dadrunter stehen und er soll sozuagen schweben.

Meine Seitenstruktur ist in etwa so:

HTML: 
<div id='wrap'>
<div id='navi'> ... </div>
<div id='floatbox' class='fr'> ... </div>
<div id='content'> ... </div>
<div id='footer'> ... </div
</div> <--// ende wrap -->

Jetzt verschiebt er mir beim Öffnen dieser 'floatbox' den 'content' nach unten. Diese 'floatbox' hat übrigens class='fr', was float:right bedeutet.

Was könnte ich da tun? Und hat eigentlich jeder Div Container einen Standarwert von 0 beim z-index?
 
Hi,

der Container muß mit position:absolute aus dem normalen Textfluß genommen werden.

Damit sich diese Positionierung nicht in der Voreinstellung auf den Dokumentkörper (Fensterrand), oder das Elternelement, sofern es eine position-Regel besitzt, bezieht, sondern die Box an gewünschter Stelle erscheint, bindest du sie zusätzlich in ein relativ positioniertes DIV ein.

mfg Maik
 
Nur zum Verständnis. Du meinst:

Code: 
<div style='position:relative'>
    <div style='position:absolute'>
    floatbox
    </div>
</div>

?
 
Jo :)

position:absolute kannst du aber auch direkt auf "floatbox" oder eine weitere Klasse anwenden, und benötigst so ein <div> weniger im Markup.

mfg Maik
 
Kann es sein, dass bei absolute kein float:right geht? Weil bei mir bleibt der immer linksbündig.
 
Die float-Regel erhält in diesem Fall das relativ positionierte Elternelement.

HTML: 
<div class="float">
     <div class="absolute">Wo finde ich mich jetzt wieder?</div>
</div>
CSS: 
.float {
position:relative;
float:right;
}
.absolute {
position:absolute;
right:0;
border:1px solid #000;
}

mfg Maik
 
Achsooo.. mir hat dieses right:0 gefehlt. Warum gibt man das eigentlich extra an? Damit CSS weiß, dass man es rechts ausrichten möchte?
 
In diesem Fall dient die Angabe dazu, damit der Inhalt nicht über den rechten Rand des Anzeigebereichs hinausläuft.

Zum Testen ein Fallbeispiel, was hier ohne diese Regel passiert:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-06-02" />

<title>tutorials.de | Schwebender Div Container?</title>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
.float {
position:relative;
float:right;
}
.absolute {
position:absolute;
/*right:0;*/ /* Zum Gegenvergleich auskommentiert */
border:1px solid #000;
}
/* ]]> */
</style>

</head>
<body>

<div class="float">
     <div class="absolute">Wo finde ich mich jetzt wieder?</div>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück