nicht angemeldet
Hallo
Bitte nicht böse sein für mein 3. CSS Posting innerhalb einer Stunde,
aber die Themen sind zwar verwandt, aber dennoch jedesmal komplett anders,
und die Probleme entstanden auch erst hintereinander und NICHT auf einmal.
-----
Also: Selfhtml sagt:
absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
In der Praxis stelle ich fest:
Nur position:relative; bezieht sich tatsächlich auf das Elternelement!
position:absolute; bezieht sich aufs <body> Element.
Quelltext siehe unten.
Es ist ganz komisch,
in manchen meiner Versuche bezog sich position:absolute; wirklich
aufs Eltern-Element, und in anderen Versuchen (wie diesem)
bezieht es sich wieder auf den Body.
-------------------------------------------
Warum geht es bei _absolute_ hier nicht?
Und wenn es echt ein Fehler wäre,
oder auch wenn es aus irgendeinem Grund so sein sollte,
warum tanzt dann _relative_ wieder aus der Reihe und bezieht sich
doch wieder aufs Elternelement?
Wenn schon, denn schon... _absolute_ tuts ja auch nicht,
aber _relative_ schon... warum??
Und warum bezieht es sich eben nur manchmal
aufs Elternelement, und manchmals nicht????
Betrifft eher absolute, bei relative glaub ich
wechselt es nicht ab...?! (oder doch?? - kann sein!)
-------------------------------------------
Danke!
Aqua
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
#gross
{
z-index:1;
width:400px;
height:400px;
background-color:#33ccff;
margin-left:300px;
margin-top:200px;
}
#klein
{
z-index:2;
width:100px;
height:100px;
background-color:#ff0000;
position:absolute; /* <--- DIESE ZEILE */
/* position:absolute; orientiert sich hier ganz eindeutig _NICHT_ am Elternelement. */
/* Es orientiert sich am <BODY> */
/* tauscht man die Zeile aus gegen position:relative; orientiert es sich jedoch am Elternelement */
top:50px;
left:50px;
}
-->
</style>
</head>
<body>
<div id="gross">
<div id="klein">
Lorem ipsum dolor sit amet
</div>
</div>
</body>
</html>