nicht angemeldet
Fehler in self? position:absolute orient. s. NICHT am Elternelem
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>
-
Nachtrag:
Hier findest Du einen Screenshot dazu:
http://jove.prohosting.com/csspage/nichteltern/ -
Moin!
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.Das ist irrelevant. Du hast "Probleme mit CSS-Positionierung". Das ist EIN Thema.
In der Praxis stelle ich fest:
Nur position:relative; bezieht sich tatsächlich auf das Elternelement!
position:absolute; bezieht sich aufs <body> Element.position:absolute bezieht sich auf das Elternelement, dessen Positionierung von "static" abweicht. Steht in SELFHTML 8.0 nicht vollständig drin, wird in Version 8.1 richtig drinstehen.
Positionierst du also die Elternelemente nicht, dann ist <body> das Bezugselement, weil alle anderen als Standardwert position:static haben. Davon abweichende Werte machen das Element zu einem, das hinsichtlich position:absolute wirksam wird.
- Sven Rautenberg
-
Hallo Sven!
Danke für die Information!
position:absolute bezieht sich auf das Elternelement, dessen Positionierung von "static" abweicht. Steht in SELFHTML 8.0 nicht vollständig drin, wird in Version 8.1 richtig drinstehen.
Positionierst du also die Elternelemente nicht, dann ist <body> das Bezugselement, weil alle anderen als Standardwert position:static haben. Davon abweichende Werte machen das Element zu einem, das hinsichtlich position:absolute wirksam wird.
Wie schaut das bei position:relative; aus?
Gibts da auch sowas in die Richtung was in selfhtml nicht
drinnesteht, oder wie soll es sich verhalten?
Ist es ein Bug dass es sich bei mir anders verhält,
oder wie sollte es sich verhalten?? (Auf das angespielt was
Du oben über position:absolute; sagtest)Danke!
Aqua-
Moin!
Wie schaut das bei position:relative; aus?
Gibts da auch sowas in die Richtung was in selfhtml nicht
drinnesteht, oder wie soll es sich verhalten?position:relative positioniert das Element dort, wo es mit position:static erscheinen würde, plus die angegebene Verschiebung durch top/left/bottom/right. Elternelementkrams gibts da nicht.
Es nimmt an seinem eigentlichen Originalplatz auch noch immer den gleichen Platz weg.
- Sven Rautenberg
-
Hallo Sven!
Es nimmt an seinem eigentlichen Originalplatz auch noch immer den gleichen Platz weg.
Wieviel genau?
Soviel platz wie ich in CSS als width: und height: angegeben habe?
Oder soviel wie der Tatsächliche Inhalt das Element aufgeblasen hat?Gibt es ein Beispiel dazu?
Ich würde mir das gerne mal ansehen wie exakt in welche Richtung
der Platz weggenommen wird (einfach mal ganz genau ansehen)
um etwaige Fehl-Darstellungen durch Unwissenheit zu vermeiden.Danke!
Aqua-
hi,
Es nimmt an seinem eigentlichen Originalplatz auch noch immer den gleichen Platz weg.
Wieviel genau?
so viel, wie er mit position:static auch beanspruchen würde.
Soviel platz wie ich in CSS als width: und height: angegeben habe?
Oder soviel wie der Tatsächliche Inhalt das Element aufgeblasen hat?so viel, wie er mit position:static auch beanspruchen würde.
Ich würde mir das gerne mal ansehen wie exakt in welche Richtung
der Platz weggenommen wirdes wird exakt der platz reserviert, denn das element mit position:static auch einnehmen würde.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hallo!
es wird exakt der platz reserviert, denn das element mit position:static auch einnehmen würde.
Zu Relative:
Der Platz den es einnehmen würde + der Platz wo er verschoben wurde?
Oder ist auf dem verschobenen Platz dann Platz?
Was passiert mit dem Platz wo es dann tatsächlich sichtbar ist?
Ist der nicht mehr reserviert? Laufen da andere Inhalte durch?WICHTIG:
Wie ist das mit _ABSOLUTE_ ?
Reserviert das an der Originalposition auch Platz?
(So wie relative)
Läuft dann auf der Stelle wo es dann tatsächlich ist Inhalt durch?
Oder ist der Platz dann verbraucht?Danke!
Aqua-
hi,
WICHTIG:
Wie ist das mit _ABSOLUTE_ ?nee, komm, nix mehr jetzt mit WICHTIG und drängelei und aufdringlichen posting-titeln wie "Z-U-S-A-T-Z-F-R-A-G-E" ... es reicht langsam, du wirst entschieden zu penetrant.
führe dir doch jetzt bitte erst mal seiten wie das genannte css4you.de zu gemüte, und erarbeite dir auch mal ein _bisschen_ was selber, anstatt hier jetzt eine neue kinkerlitzchen-frage nach der anderen zu stellen.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
-
-
Hallo,
Wie schaut das bei position:relative; aus?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Position</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Beispiele zu CSS position</h1><h2>Relative Positionierung</h2>
<p>Ein relativ positioniertes Element bezieht die Werte von left, right, top und bottom auf sich selbst, also auf seine eigentliche Position im Elementfluss. Das nachfolgende P-Element würde normalerweise direkt unter diesem P-Element stehen (Margins natürlich eingeschlossen). Durch position:relative; top:-4em; left:5em; wird es aber um 4em höher und um 5em weiter rechts dargestellt als normalerweise.</p>
<p style="position:relative; top:-4em; left:5em; background-color:#0F0;">Beispiel mit position:relative; top:-4em; left:5em;</p><h2>Absolute Positionierung</h2>
<p>Ein absolut positioniertes Element bezieht die Werte von left, right, top und bottom auf das Element, welches es umgibt und gleichzeitig nicht position:static (Standard) dargestellt wird. Gibt es ein solches umgebendes Element nicht, dann werden die Werte von left, right, top und bottom auf den Viewport (Browserfenster, Frame) bezogen. Das nachfolgende P-Element befindet sich zwar in einem DIV-Element. Dieses wird aber mit Standard-Position static dargestellt. Deshalb wird das P-Element am Viewport ausgerichtet.</p>
<div style="background-color:#00F; border:1px solid black;"><p style="position:absolute; top:5em; left:5em; background-color:#F00;">Beispiel mit position:absolute; top:5em; left:5em; im Viewport, zu sehen an der left-Position, die sich _nicht_ am BODY orientiert.</p></div>
<p>Das nachfolgende P-Element befindet sich in einem DIV-Element mit position:relative. Deshalb beziehen sich seine Werte für left, right, top und bottom auf dieses umgebende Element.</p>
<div style="position:relative; background-color:#F00; border:1px solid black;"><p style="position:absolute; top:5em; left:5em; background-color:#00F;">Beispiel mit position:absolute; top:5em; left:5em; im DIV</p></div><h2>Dimensionen der Elemente</h2>
<p>Beide DIV-Elemente im Beispiel verlieren durch die absolute Positionierung ihren Inhalt, so dass sie eine Höhe von 0 erhalten.</p>
</body>
</html>viele Grüße
Axel
-
Hallo Axel!
Vielen lieben Dank für das geniale Beispiel!
Irre toll!Auch eine Frage dazu gibt es!
Du schreibst:
Ein absolut positioniertes Element bezieht die Werte von left,
right, top und bottom auf das Element, welches es umgibt und
gleichzeitig nicht position:static (Standard) dargestellt wird.Das würde sich hierauf beziehen:
<div style="position:relative;">
<div style="position:absolute;">
Lorem Ipsum dolar sit amet
</div>
</div>_ABER_:
Was ist wenn es zwei _NICHT_ verschachtelte Elemente sind?
Also so:<div style="position:relative;"> </div>
<div style="position:absolute;">Lorem Ipsum dolar sit amet</div>----
Zusatz-Frage:
Es ist egal, ob das erste div was in meinem Beispiel RELATIVE ist,
dann mal _ABSOLUTE_ ist oder eben RELATIVE, oder?Danke!
Aqua-
hi,
Was ist wenn es zwei _NICHT_ verschachtelte Elemente sind?
Also so:<div style="position:relative;"> </div>
<div style="position:absolute;">Lorem Ipsum dolar sit amet</div>was soll damit sein?
die haben so viel miteinander zu tun, wie du vermutlich verwandschaftsbeziehungen zur chinesischen regierung unterhältst - gar keine.Zusatz-Frage:
Es ist egal, ob das erste div was in meinem Beispiel RELATIVE ist,
dann mal _ABSOLUTE_ ist oder eben RELATIVE, oder?dein beispiel mit den zwei divs hat bzgl. abhängigkeiten eh keinen sinn, da absolut keine solche besteht.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em." -
Hallo,
Zusatz-Frage:
Es ist egal, ob das erste div was in meinem Beispiel RELATIVE ist,
dann mal _ABSOLUTE_ ist oder eben RELATIVE, oder?Hast Du es ausprobiert?
Du meinst das:
...
<p style="position:relative; top:-4em; left:5em; background-color:#0F0;">Beispiel mit position:relative; top:-4em; left:5em;</p>
...
wird zu:
...
<p style="position:absolute; top:-4em; left:5em; background-color:#0F0;">Beispiel mit position:absolute; top:-4em; left:5em;</p>
...
?Dann ist es nicht mehr zu sehen, weil es 4em _über_ dem oberen Rand des Viewports steht.
viele Grüße
Axel
-
Hallo Axel!
Danke, dieser Sub-Sub Zweig des Threads ist nun klar!
Danke!
Aqua
-
-
-
-
-
-
Hallo,
Bitte nicht böse sein für mein 3. CSS Posting innerhalb einer Stunde,
Bitte bleib in einem Thread, und formuliere dein Problem _präzise_ und einigermaßen _lakonisch_; unterlasse diese Redundanz am frühen Morgen!
Gruß
Lachgas--
Keine Verbesserung ist zu klein oder geringfügig, als dass man sie nicht durchführen sollte. (Adorno) -
Hallo nochmals!
Um im selben Thread zu bleiben hier eine Unterfrage:
<div style="position:relative;">
<div style="position:absolute;"> foo </div>
<div style="position:absolute;"> bar </div>
<div style="position:absolute;"> bazz </div>
<div style="position:absolute;"> bleh </div>
</div>Was könnte man mit so einer Verschachtelung aufführen?
Wann macht das Sinn?
Sprich was könnte ich damit Sinnvolles anstellen,
und welche Werte würden Sie brauchen?Würden die Absoluten Elemente untereinander aufeinander reagieren?
Wie wäre es wenn noch ein relatives Element ins Spiel kommt?Wie ist das mit dem MUTTER-Element?
Ist egal ob das - wie hier - relative oder auch absolute ist, oder?Darf ich bitte noch Beispiele sehen?
Danke!
Aqua-
Hallo,
Um im selben Thread zu bleiben hier eine Unterfrage:
<div style="position:relative;">
<div style="position:absolute;"> foo </div>
<div style="position:absolute;"> bar </div>
<div style="position:absolute;"> bazz </div>
<div style="position:absolute;"> bleh </div>
</div>
Was könnte man mit so einer Verschachtelung aufführen?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wuerfel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#wuerfel {position:relative; width:100px; height:100px; background-color:#000; border:15px solid #000;}
.punkt {position:absolute; width:16px: height:16px;}
#p1 {top:0; left:0;}
#p2 {top:0; right:0;}
#p3 {top:42px; left:0;}
#p4 {top:42px; right:0;}
#p5 {bottom:0; left:0;}
#p6 {bottom:0; right:0;}
#p7 {top:42px; left:42px;}
-->
</style>
</head>
<body>
<div id="wuerfel">
<img class="punkt" id="p1" src="b01.gif" alt="Punkt1" title="" width="16" height="16">
<img class="punkt" id="p2" src="b01.gif" alt="Punkt2" title="" width="16" height="16">
<img class="punkt" id="p3" src="b01.gif" alt="Punkt3" title="" width="16" height="16">
<img class="punkt" id="p4" src="b01.gif" alt="Punkt4" title="" width="16" height="16">
<img class="punkt" id="p5" src="b01.gif" alt="Punkt5" title="" width="16" height="16">
<img class="punkt" id="p6" src="b01.gif" alt="Punkt6" title="" width="16" height="16">
<img class="punkt" id="p7" src="b01.gif" alt="Punkt7" title="" width="16" height="16">
</div>
</body>
</html>Aufgabe:
Zu erstellen ist ein Würfelspiel mit Hilfe eines BUTTON-Elements und JavaScript in Verbindung mit der CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility. Hinweis: Nutzen Sie http://de.selfhtml.org/javascript/objekte/math.htm#random und ein Array, in dem Sie die Zuordnung der Würfelpunkte zu den Zahlen 1-6 speichern.viel Spass ;-))
Axel
-
Hallo Axel!
Danke für Deine liebe Hilfe heute!
Das Beispiel ist echt toll!Eine Frage bleibt noch über:
bei position:relative; bleibt ja der Platz wo das Element normalerweise wäre *reserviert*
Wie ist das bei Deinem Beispiel das Du mir mit dem
Würfel gepostet hast?#wuerfel {position:relative; width:100px; height:100px; background-color:#000; border:15px solid #000;}
.punkt {position:absolute; width:16px: height:16px;}
#p1 {top:0; left:0;}
#p2 {top:0; right:0;}
#p3 {top:42px; left:0;}
#p4 {top:42px; right:0;}
#p5 {bottom:0; left:0;}
#p6 {bottom:0; right:0;}
#p7 {top:42px; left:42px;}Ist da der ganze Platz, an dem _kein_absolut_ Positioniertes Element ist frei verfügbar??
Oder ist da auch was reserviert?
Wie verhalten sich "normale" Elemente denen KEINE
Positionierung zugewiesen wurde, aber vom Platz her dort wären,
wo ein ABSOLUT Positioniertes Element ist?
Verlaufen die über dem absolut Positionierten?
Oder dahinter?
Oder verdrängen sich die?Ich könnte das zwar testen,
aber ich würde gerne wissen wie das- Standardmäßig zu sein hat
- Generell in "allen" wichtigen Browsern ist, und obs Buggy ist.
Das kann ich nur durch einen Test in meinen Linux-Browsern nicht
herausfinden.
Danke nochmals vielmals für die liebe Hilfe heute!
Es brachte mich sehr viel weiter
in meinem Verständnis!Danke,
Aqua-
Hallo,
bei position:relative; bleibt ja der Platz wo das Element normalerweise wäre *reserviert*
Wie ist das bei Deinem Beispiel das Du mir mit dem
Würfel gepostet hast?Das relativ positionierte Element DIV#wuerfel ist 130px breit und 130px hoch und steht dort, wo es auch mit position:static stehen würde, da ja kein Wert für left, right, top, bottom explizit vorgegeben ist. Würde es verschoben werden, würde es static-Inhalt überdecken. Sein eigentlicher Platz im static-Elementfluss würde trotzdem freigehalten.
Die absolut positionierten Punkte sind völlig aus dem Elementfluss herausgelöst. Sie existieren für den static-Inhalt gar nicht.
Wie verhalten sich "normale" Elemente denen KEINE
Positionierung zugewiesen wurde, aber vom Platz her dort wären,
wo ein ABSOLUT Positioniertes Element ist?Positionierte Elemente werden in einen Layern dargestellt, die _über_ dem static-Layer liegen. Wenn also positionierte Elemente so platziert werden, dass sie Elemente im normalen Fluss tangieren, dann überdecken sie diese. Wenn sich positionierte Elemente tangieren, dann liegen Elemente mit größerem z-index vor Elementen mit kleinerem z-index. Vorstellen kann man sich das, als wäre static-Inhalt ein Textblatt, positionierter Inhalt steht auf Folien, die man auf das Textblatt legt. Folien mit höherem z-index liegen über Folien mit niedrigerem z-index.
viele Grüße
Axel
-
Hallo Leute, Sven und besonders Axel!
Danke nochmals für die liebe Hilfe!
Echt super lieb, DANKE!Alles Gute,
Aqua-
Hallo,
[...] (Thread Close)
Das hättest du wohl gerne ... Hier wird nichts geschlossen!
Gruß
Lachgas--
Keine Verbesserung ist zu klein oder geringfügig, als dass man sie nicht durchführen sollte. (Adorno)
-
-
-
-
HALLO AQUA!
HÖST DU MICH???????
L-A-S-S D-A-S S-C-H-R-E-I-E-N S-E-I-N !-!-!
DANKE!!!
THOMAS
-