ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!?

damonster · #1 (**permalink**) 26.08.2008, 20:16

Hallo,

ich bin ein ganz neuer Frischling. ich spiele schon seit Tagen rum. Ich habe schon so viele Tutorials gelesen und mich auch schon entschlossen, welche Programierungsvariante ich nehme.

Ich habe vorher schon mit Float schon ein wenig rumgespielt und schon ein wenig damit hinbekommen.

Ich wollte die relative und Absolute Positionierung nutzen da es sich ja den verschiedenen Auflösungen anpasst und ich das Recht nützlich finde.

Hier mein Problem:
Berichtigt mich falls ich falsch liege.

Mit der absolute Positionierung lege ich doch mit left,right usw fest, wo genau ich das Bild ( z.B. ) hinlege. ich habe folgenden Satz gefunden den ich nicht einordnen kann, "Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout." Wofür brauch man diese Variante. Wo ist es sinnvoll absolute posis zu nutzen?

die relative Positionierung verstehe ich gar nicht. Ich verstehe es so. Das Element ist auf der HP, mit der rela. posi. kann man es verschieben. So aber der Bereich wo das Element vorher war wird ja irgendwie reserviert. Was bedeutet das? Wozu braucht man die. Wie setzt man die richtig ein?

Kann mir das mal wer erklären das ich es so verstehe? sorry Leute aber bei den ganzen Guides peile ich das nicht.

Ich bedanke mich schon einmal

Gumbo · #2 (**permalink**) 26.08.2008, 21:21

Die relative Positionierung zu erklären, ist wohl das Einfachere der beiden.

Relativ positioniert heißt, dass das Element relativ seiner normalen Position positioniert wird, wobei der normale Fluss unverändert bleibt. Ein einfaches Beispiel:

Code:

<span style="background-color:#F00">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="position:relative; top:0.5em; left:0.5em; background-color:#FF0">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Der zweite Satz wird hier relativ seiner normalen Position versetzt dargestellt.

Bei einer absoluten Positionierung ist nun nicht die normale Position des Elements die Ausgangsposition, sondern ein Referenzelement. Gleichzeitig wird ein absolut positioniertes Element aus der Umgebung gerissen. Das Referenzelement ist das nächst übergeordnete Element, das entweder relativ oder ebenfalls absolut positioniert ist, oder eben das Wurzelelement.

damonster · #3 (**permalink**) 26.08.2008, 21:41

Zitat:

Relativ positioniert heißt, dass das Element relativ seiner normalen Position positioniert wird.Der zweite Satz wird hier relativ seiner normalen Position versetzt dargestellt.

Okay deinen Code habe ich mal getestet und dein Beispiel war mir jetzt auch einleuchtend. Ich verstehe jetzt nur nicht wie man mit dieser Positionierung, Weblayouts erstellen kann. Genauer gesagt, was die einem da nützen. Man soll doch mit den Posis. Boxen genau platzieren können. Mir ist schleierhaft wie das gehen soll und wo dort die Vorteile sind.

Zitat:

Bei einer absoluten Positionierung ist nun nicht die normale Position des Elements die Ausgangsposition, sondern ein Referenzelement. Gleichzeitig wird ein absolut positioniertes Element aus der Umgebung gerissen. Das Referenzelement ist das nächst übergeordnete Element, das entweder relativ oder ebenfalls absolut positioniert ist, oder eben das Wurzelelement.

Was bedeutet das unterstrichene? Welche Vorteile bringt mir diese Posi bei dem Weblayout?

Wäre das erstellen für Weblayouts mit Floats besser als mit den Posis?

MfG

paracelsus · #4 (**permalink**) 27.08.2008, 08:40

Relativ heißt, das Du es relative zum Dokumentenfluss positionierst.
Absolut heißt, das es aus diesem Fluss herausgenommen wird und an jedweder Stelle positioniert werden kann.

Dies ist grade für Anfänger verlockend, aber gerade für diese ein Risiko, da sie versucht sind, ein Element festzunageln - das kann unschön werden.

Ganz interessant: Learn CSS Positioning in Ten Steps: position static relative absolute float

IChao · #5 (**permalink**) 27.08.2008, 08:50

Bevor noch mehr Tutorials auf ihn einstürmen, würde ich zu einem Buch raten; Little Boxes I wäre angemessen und bezahlbar. Die Fragen richten sich schließlich mehr nach dem Begriff des Flusses der Boxen einer Seite.

hubspe · #6 (**permalink**) 27.08.2008, 09:54

Moin,

ich hab dir mal je ein Beispiel für position:static, position:relative und position:absolute zusammengestellt.
Einfach in deinen Editor kopieren abspeichern und den Anweisungen und Erklärungen folgen.

position:static:

Code:

<!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=utf-8" />
  <title>Position:static</title>  

<style type="text/css">
*  {
    padding:0;
	margin:0;
}
body  {
    background-color:#696969;
}
div  {
    color:#f5f5f5;
	font-weight:bold;
    padding:2em;
	border:3px solid yellow;
	margin:0.5em;
}
p  {
    width:650px;
	color:#000;
	background-color:#dcdcdc;
	padding:1em;
    margin:2em auto;
}
#green  {
    background-color:green;
}
#red  {
    background-color:red;
}
#blue  {
    background-color:blue;
}
</style>  
  
</head>
<body>

  <div id="green">Box 1 = grün<br />position:static; - Der normale Fluss der Elemente.</div>
  <div id="red">Box 2 = rot<br />position:static; -Der normale Fluss der Elemente.</div>
  <div id="blue">Box 3 = blau<br />position:static; - Der normale Fluss der Elemente.</div>
  <p>position:static muss nicht extra angegeben werden, es ist die Grundeinstellung
        ( oder default-Einstellung) der Browser.<br />
	&lt;div&gt; und &lt;p&gt; sind Blockelemente und erzeugen einen eigenen Absatz.<br />
	D.h. sie ordnen sich untereinander an und werden so breit wie es geht, wenn sie kein
	&lt;width&gt; erhalten haben.</>
</body>
</html>

position:relative

Code:

<!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=utf-8" />
  <title>position:relative;</title>  
<style type="text/css">
*  {
    padding:0;
	margin:0;
}
body  {
    background-color:#696969;
	font:100.01%/1.5 verdana, arial, helvetica, sans-serif;
}
div  {
     width:600px;
    color:#f5f5f5;
	font-weight:bold;
    padding:1em;
	border:3px solid yellow;
	margin:0.5em;
}
p  {
    width:650px;
	color:#000;
	background-color:#dcdcdc;
	padding:1em;
    margin:2em 0 0 0.5em;
}
.aenderungen  {
    color:#c20810;
}
#green  {
	background-color:green;
}
#red  {
    background-color:red;
}
#blue  {
    background-color:blue;
}
</style>  
</head>
<body>
  <div id="green">Box 1 = grün.<br />
                            position:relative; - Box kann relativ zu ihrem Standpunkt im Fluss verschoben werden.<br />
                            Mögliche Positionsangaben: top, bottom, left, right. </div>
  <div id="red">Box 2 = rot.<br />position:static; -Der normale Fluss der Elemente </div>
  <div id="blue">Box 3 = blau<br />position:static; - Der normale Fluss der Elemente -</div>

   <p>Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes bei #green folgendes 
        <strong>zusätzlich</strong> ein:<br /><strong class="aenderungen">#green { position:relative; }</strong><br />
	  Speichern und im Browser betrachten.<br />
	  Wie wir sehen, sehen wir nichts!<br />
	  Da die Box keine Angaben für eine neue Position bekommen hat ist sie nun zwar "relative"
	  bleibt aber ansonsten an ihrem Platz.<br />
	  Anschließend ergänzen sie die Gestaltungsanweisungen von #green noch um folgendes:<br />
	  <strong class="aenderungen">#green  { left:100px; top:100px; }</strong><br />
	  Speichern und im Browser betrachten.<br />
	  Sie sehen das die grüne Box die 100px von ihrem alten Standpunkt aus gemessen hat,
	  einen Zaun um den alten Platz gelegt hat, damit während ihrer Abwesenheit keine andere Box
	  dahin kann und dann erst an ihren neuen Platz marschiert ist.</p>
</body>
</html>

position:absolute

Code:

<!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=utf-8" />
  <title>position:absolute;</title>  
<style type="text/css">
*  {
    padding:0;
	margin:0;
}
body  {
    background-color:#696969;
	font:100.01%/1.5 verdana, arial, helvetica, sans-serif;
}
div  {
     color:#f5f5f5;
	font-weight:bold;
    
	border:3px solid yellow;
}
#wrapper  {
       width:700px;
	background-color:#dcdcdc;
	border:2px solid #000;
	margin:2em auto;
}
#green  {
       width:400px;
	background-color:green;
	padding:1em;
}
#red  {
    width:400px;
    background-color:red;
	padding:1em;
}
#blue  {
    width:400px;
    background-color:blue;
	padding:1em;
}
p  {
    width:650px;
	color:#000;
	background-color:#dcdcdc;
	padding:1em;
    margin:2em auto;
}
.aenderungen  {
    color:#c20810;
}
</style>  
</head>
<body>
  <div id="wrapper">
  <div id="green">Box 1 = grün<br />
                          position:absolute; - Box wird komplett aus dem Fluss genommen und die
                          anderen Elemente tun so als wäre die absolut positionierte Box nicht da.<br />
				Mögliche Positionsangaben: top, bottom, left, right.</div>
  <div id="red">Box 2 = rot<br />position:static; -Der normale Fluss der Elemente </div>
  <div id="blue">Box 3 = blau<br />position:static; - Der normale Fluss der Elemente </div>
  </div><!--Ende #wrapper-->
  <p>Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes bei #green folgendes 
        <strong>zusätzlich</strong> ein:<br /><strong class="aenderungen">#green { position:absolute; }</strong><br />
	  Speichern und im Browser betrachten.<br />
	  Die grüne Box bleibt scheinbar an ihrem Platz, die rote Box ist verschwunden und die blaue Box teilweise verdeckt.<br />
	  Was ist passiert?<br />
	  Durch position:absolute; hat sich die grüne Box auf den Betrachter zubewegt. Die rote und die blaue Box
	  sind darunter nach oben gerutscht, an den Platz wo vorher die grüne Box war.<br />
	  
         Anschließend ergänzen sie die Gestaltungsanweisungen von #green noch um folgendes:<br />	
         <strong class="aenderungen">#green { left:0; top:0; }</strong><br />
	   Speichern und im Browser betrachten.<br />
	   Die grüne Box haut nach ganz oben links im Bildschirm ab. Da sie absolut ist, nimmt sie auch die Positionsangaben
	   absolut, d.h. sie positioniert sich 0px vom linken Rand des Bildschirms und 0px vom oberen Rand des Bildschirms.
	   Die grüne Box orientiert sich in diesem Fall also an &lt;body&gt;<br />
	   Jetzt sehen wir auch das die grüne Box die beiden anderen Boxen vorher ganz und teilweise verdeckt hat.<br />
	   Bitte ergänzen sie die Gestaltungsanweisungen von #wrapper um folgendes:<br />
          <strong class="aenderungen">#wrapper  { position:relative; }</strong><br />
          Speichern und im Browser betrachten.<br />
          Die grüne Box ist an ihren alten Platz zurückgesprungen. Wir haben dem umgebenden Element von #green, nämlich
         #wrapper <i>position:relative;</i> mit auf den Weg gegeben. Für die grüne Box heißt das: Ich orientiere mich bei
          den Positionsangaben nicht mehr an &lt;body&gt; sondern an meinem Elternelement, #wrapper.</p>		 
</body>
</html>

Hoffe es ist für dich verständlich.

Gruß
Klaus

hubspe · #7 (**permalink**) 27.08.2008, 11:47

Mahlzeit,

ich muss noch ein Beispiel mit position:fixed nachtragen.

position:fixed

Code:

<!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=utf-8" />
  <title>position:fixed;</title>  
<style type="text/css">
*  {
    padding:0;
	margin:0;
}
body  {
    color:#000;
    background-color:#f5f5f5;
	font:100.01%/1.5 verdana, arial, helvetica, sans-serif;
}
div  {
	font-weight:bold;
}
#wrapper  {
       width:800px;
	background:url(fauxcolumns.gif) repeat-y left top;
	border:1px solid #000;   
	margin:2em auto;
}
#links  {
       float:left;
	 width:90px;
	 background-color:#dcdcdc;
	 padding:5px;
}
#mitte  {
      float:left;
	width:170px;
	background-color:#cbf1f7;
       padding:15px;
}
#rechts  {
    float:left;
    width:480px;
	background-color:#f7f1cb;
   padding:10px;
}
.fixed  {
	width:88px;
    color:#f5f5f5;
	background-color:green;
	border:1px solid red;
}

.aenderungen  {
    color:#c20810;
}
.unterstrichen  {
    text-decoration:underline;
	color:#c20810;
}
.clear  {
	clear:both;
	height:0;
	width:0;
	visibility:hidden;
	border:0;
} 
</style>  
</head>
<body>
  <div id="wrapper">
  <div id="links"><p class="fixed">Fixierte Box die mitscrollt!</p></div>
  <div id="mitte"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
					exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
					dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
					mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
					accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
					veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
					quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos 
					qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia 
					dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
					ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis 
					nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
					consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
					molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?At vero 
					eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum 
					</p></div>
  <div id="rechts"><p>Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes bei .fixed folgendes 
                                 <strong>zusätzlich</strong> ein:<br /><strong class="aenderungen">.fixed { position:fixed; left:15px; top:15px; }</strong><br />
	                           Speichern und im Browser betrachten.<br />
					Das fixierte Element orientiert sich bei den Positionsangaben <span class="unterstrichen">immer</span> an &lt;body&gt;. 
					Es nützt auch nichts (wie bei position:absolute;!) #wrapper <i>position:relative;</i> zu geben.<br />
					Das fixierte Element bleibt buchstäblich oben links an den Bildschirm genagelt.<br /> Auch wenn sie die Seite nach unten
					scrollen, es bleibt an derselben Stelle im Bildschirm stehen.<br />
					Ein Nachteil von <i>position:fixed</i> ist, das der Internet Explorer bis einschließend Version 6
					<i>position:fixed;</i> nicht kennt und es deshalb ignoriert.
	  </p></div>
  <hr class="clear" />
  </div><!--Ende #wrapper-->
  <p></p>		 
</body>
</html>

Gruß
Klaus

damonster · #8 (**permalink**) 27.08.2008, 14:10

Danke für die Antworten.

Klaus danke für deinen Beispielcode der hat mir sehr geholfen. Ich verstehe jetzt wie die einzelnen Posis funktionieren. Mir bleibt eine Frage bei denem Beispielcode. Genauer gesagt bei der Relativen Variante, wurde Box Eins ja verschoben. Der Ausgangsort bleibt aber unversehen und wie du sagtest ist da ein "unsichtbarer Kasten" noch drum. Meine Frage jetzt, kann man in diesem Bereich jetzt nichts mehr machen? Ist der quasi reserviert für die Box Eins und ist gesperrt für alles andere? Hoffe es war verständlich.

Andreas dein Link hat mir auch sehr geholfen. Wurde da sehr gut erklärt.

Fazit für mich: absolute Posi. kann man doch am besten für Menüs benutzen, quasi alles was sich Boxmässig nicht verändert. Relative Posi. ist doch daher besser für z.B. "Newsbereiche" wo sich die Box dann verändern muss nachher. (wenn zuviel geschrieben wird)

Dann wäre eine sinnvolle Kombination aus den ganzen Posis und floats die effektivste Möglichkeit.

hubspe · #9 (**permalink**) 27.08.2008, 14:16

Hi,

Zitat:

Zitat von damonster

Danke für die Antworten.

Meine Frage jetzt, kann man in diesem Bereich jetzt nichts mehr machen? Ist der quasi reserviert für die Box Eins und ist gesperrt für alles andere? Hoffe es war verständlich.

jep, um diesen Bereich hat die relative Box einen Zaun gezogen und ihn damit für alle anderen Elemente gesperrt.

Gruß
Klaus

edit. Noch ein Nachtrag:
position:absolute/relative setze ich persönlich nur da ein wo es nicht anders geht, z.B. Grafische Menüs, Image Replacement Technik nach Gilder/Levin und für die skiplinks/skiplinktabs.
Ich versuche alles möglichst mit float/clear u. padding/margin zu lösen.
Durch relat./absol. Posit. machst du nämlich dein Layout in dem Bereich unflexibel und diesen Riesenvorteil den Webseiten gegenüber Buchseiten haben möchte ich mir erhalten.

Timo · #10 (**permalink**) 27.08.2008, 15:30

Also ich hab "in der Praxis" noch nie mit position: gearbeitet. Bis jetzt gings immer mit float: meiner Meinung nach "sauberer".

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
div-höhe? - Hauptcontainer über ganze Seite will nicht...	AndMei	CSS	5	13.12.2010 14:43
Problem mit CSS relative, absolute & float	FrageHabe	CSS	3	13.08.2010 14:40
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Was übersehe ich?	Psyclown	CSS	2	19.10.2008 13:00
prblemme mit mein inhalt div	carlos587261	CSS	3	23.04.2008 14:07