73%
22%
19%
11%
6%
Samstag, 29. Mai 2004, 21:20
Css
Guten Abend,
Nehme mal an Css sollte in dieses Forum.
Nun meine Frage.
Bei der Seite http://css.fractatulum.net/elemente.htm
gibt es ja einen Hover Effekt bei den Menüs
Dadurch wird kommt doch oben eine genauere Beschreibung ...
Der Hover effekt hat aber position:absolute, warum steht er nun am anfang des bodys ?
Frage: Position:absolute richtet sich ja nach dem Elternelement, was ist eigentlich das Elternelement bzw. wie wird es bestimmt ?
Mit freundlichem Gruß
AleXo
Nehme mal an Css sollte in dieses Forum.
Nun meine Frage.
Bei der Seite http://css.fractatulum.net/elemente.htm
gibt es ja einen Hover Effekt bei den Menüs
Dadurch wird kommt doch oben eine genauere Beschreibung ...
Der Hover effekt hat aber position:absolute, warum steht er nun am anfang des bodys ?
Frage: Position:absolute richtet sich ja nach dem Elternelement, was ist eigentlich das Elternelement bzw. wie wird es bestimmt ?
Mit freundlichem Gruß
AleXo
Montag, 31. Mai 2004, 18:00
Zitat
Original von mat
Absolut richtet sich nicht nach dem Elternelement, sondern wie der Name sagt, absolut.
Aber sicher richtet sich 'position:absolute' nach dem Elternelement, sofern dieses positioniert ist, egal wie, außer statisch.(1)
Ich habe hier mal einen bsp-code eingefügt.
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.box-1 { position: relative;
left: 100px; top: 10px;
height: 150px; width: 500px;
border: 3px solid blue}
.bild-1 { position:absolute;
left: 10px; top: 10px; }
.box-2 { position: absolute;
left: 100px; top: 200px;
height: 300px; width: 500px;
border: 3px solid red}
.box-innen { position: absolute;
left: 40px; top: 40px;
height: 200px; width: 300px;
border: 2px solid green}
.bild-2 { position: absolute;
left: 10px; bottom: 10px; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" style="margin:0">
<div class="box-1"> <!--relativ-->
<img src="img/logo.gif" width="222" height="55"
alt="bild-1" border="2" class="bild-1">
</div>
<div class="box-2"> <!--absolut-->
<div class="box-innen"> <!--relativ-->
<img src="img/logo.gif" width="222" height="55"
alt="bild-2" border="2" class="bild-2">
</div>
</div>
</body>
</html>
|
Bild-1 ist zwar absolut positioniert, d.h. aber "absolut innerhalb seines Elternelementes", der blauen Box.
Da die blaue Box auch positioniert ist (im bsp mit "relative") richten sich alle Kindelemente der blauen box an dieser aus, und nicht am body.
Für Bild-2 ist das Eltern-Element die grüne Box, für die grüne Box ist das Eltern-Element die rote Box und für die rote Box ist es der body.
Würdest du zb bei der grünen Box die Positionierung
position: absolute; left: 40px; top: 40px;
weglassen, so wäre das Eltern-Element von Bild-2, (die grüne Box), nicht mehr positioniert und Bild-2 würde sich am nächst höheren Element (der roten Box) ausrichten.
Würde auch hier die Positionierung fehlen, so wäre dann der body als oberstes Element maßgebend.
(1) 'position-static' ist die Voreinstellung des Browsers und bedeutet *keine Positionierung*, da das Element im Textfluß ist.
Grüße
gaby
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »gaby*« (31. Mai 2004, 20:12)
Montag, 31. Mai 2004, 18:09
RE: Css
Original von AlexO
Der Hover effekt hat aber position:absolute, warum steht er nun am anfang des bodys ?
Ich habe mal auf die Schnelle drübergeschaut.
In der CSS-Datei frac_main.css ist für die Navigation keine Positionierung angegeben, sondern nur ein Abstand zum darüberliegenden Element.
margin:30px 0 0 5px;
Deshalb richten sich eventuelle Kindelemente nicht an der Position der Navi aus, sondern am Elternelement der Navi. (Wahrscheinlich ist das der body; ich habe aber jetzt nicht nachgeschaut)
Frage: Position:absolute richtet sich ja nach dem Elternelement, was ist eigentlich das Elternelement bzw. wie wird es bestimmt ?
siehe das andere Posting. ;-)
Grüße
gaby
Montag, 31. Mai 2004, 23:31
Original von gaby*
Original von mat
Absolut richtet sich nicht nach dem Elternelement, sondern wie der Name sagt, absolut.
Aber sicher richtet sich 'position:absolute' nach dem Elternelement, sofern dieses positioniert ist, egal wie, außer statisch.(1)
...
Oh Sch****... wie Recht du hast! Danke für dein Code... hab bisher noch nie divs so verschachteln müssen.