Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 37): Elemente positionieren

HTML & CSS für Einsteiger (Teil 37): Elemente positionieren

Ihr könnt für einen Bereich oder ein Element die Art der Positionierung bestimmen. Verwendet wird dafür die position-Eigenschaft. Diese Eigenschaft gibt an, wie ein Element letztendlich positioniert werden soll. Insgesamt stehen dafür vier verschiedene Positionierungsvarianten zur Wahl.

static – es wird keine spezielle Positionierung vorgenommen und ein normaler Textfluss findet statt.
relative – es findet eine relative Positionierung statt, die sich an der Normalposition oder Anfangsposition des Elements orientiert.
absolute – es findet eine absolute Positionierung über die Eigenschaften top, bottom, left und right statt. Absolut positionierte Elemente befinden sich außerhalb des normalen Textflusses. Berechnet wird die absolute Position relativ zu den Rändern des Elternelements (aber nur, wenn dieses nicht die Eigenschaft position: static besitzt).
fixed – das Element wird absolut positioniert. Beim Scrollen bleibt das Element stehen.

Die ersten beiden Varianten ermöglichen eine variable Positionierung. Hier werden Elemente im Bezug aufeinander positioniert. Die folgenden zwei Beispiele zeigen, wie diese Art der Positionierung aussehen könnte:

• Element 2 wird 30 Pixel versetzt in Bezug auf Element 1 platziert.
• Element 2 wird hinter Element 1 platziert.

Anders verhält es sich mit fixed und static. Darüber lassen sich Elemente an ganz konkreten Stellen platzieren. Die Positionierungsangaben beziehen sich auf das übergeordnete Elternelement oder das Browserfenster. Ein Beispiel dazu:

• Das Element 1 wird exakt 30 Pixel vom rechten und 20 Pixel vom oberen Browserfensterrand platziert.

Nachfolgend werden die verschiedenen Varianten der Positionierung noch einmal detailliert vorgestellt. Zuvor jedoch ein Hinweis: Im Zusammenhang mit dem Positionieren von Elementen spielt das sogenannte Floaten eine wichtige Rolle. Auf dieses wichtige CSS-Prinzip gehe ich im nächsten Tutorial noch einmal ausführlich ein. Grundsätzlich geht es bei diesem Floaten darum, wie die Elemente der Webseite im Dokument fließen. Dabei werden Elemente so weit wie möglich in die jeweilige Richtung gepresst. Durch die Art der Positionierung lässt sich explizit der Elementfluss bestimmen.


 

Die relative Positionierung

Durch den Einsatz der relativen Positionierung über position: relative geschehen zwei Dinge:

• Die Box wird aus ihrem normalen Fluss verschoben.
• Der ursprüngliche Platz des Elements wird reserviert.

Durch die Reservierung des ursprünglichen Platzes verhalten sich die anderen Elemente so, als ob das Element tatsächlich noch an seinem Platz vorhanden ist.

Ein Beispiel:
<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8"> 
 <title>PSD-Tutorials.de</title> 
 <style> 
 div { 
     width: 20%; 
     background-color: white; 
     padding: 10px; 
     border: 1px solid black; 
     margin: 5px; 
 } 
 #box { 
     position: relative; 
     top: 25px; 
     right: 25px; 
     background-color:#33CCFF; 
 } 
 </style> 
 </head> 
 <body> 
 <div id="box">Box 1</div> 
 <div>Box 2</div> 
 <div>Box 3</div> 
 </body> 
 </html>

 
Hier wurden drei Boxen definiert.

Bilder



Die beiden Boxen 2 und 3 haben keine Anweisung zur Positionierung bekommen. Sie folgen daher dem normalen Dokumentfluss. Box 1 wurde hingegen relativ positioniert. Dadurch bleiben die Boxen 2 und 3 völlig unberührt von Box 1. Der Platz von Box 1 wird von diesen Boxen also nicht beansprucht. Durch die Angaben top, bottom, left und right erfolgt die Positionierung der Boxen. Bei der relativen Positionierung wird dabei von der ursprünglichen Position im Dokumentfluss (Flow) ausgegangen.

top: 25px – die Box wird um 25 Pixel nach unten verschoben. An der normalen Position der Box werden oben also 25 Pixel eingefügt.
right: 25px – die Box wird um 25 Pixel nach links verschoben. An der normalen Position der Box werden rechts also 25 Pixel eingefügt.

Die Pixelangaben sind relativ zur ursprünglichen Position zu sehen. Dabei bestimmen die Angaben, wo der Wert eingefügt wird, also oben und rechts. Dieser Aspekt ist entscheidend. Die Angaben legen also nicht fest, wohin die Box verschoben wird.


 

Die absolute Positionierung

Weiter geht es mit der absoluten Positionierung. Diese Positionsart nimmt das Element vollständig aus dem Flow heraus. Die anderen Elemente auf der Seite verhalten sich so, als ob das Element überhaupt nicht vorhanden wäre.

Ein Beispiel:
<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8"> 
 <title>PSD-Tutorials.de</title> 
 <style> 
 div { 
    width: 20%; 
    background-color: white; 
    padding: 10px; 
    border: 1px solid black; 
    margin: 5px; 
 } 
 #box { 
    position: absolute; 
    top: 25px; 
    right: 25px; 
    background-color:#33CCFF; 
 } 
 </style> 
 </head> 
 <body> 
 <div id="box">Box 1</div> 
 <div>Box 2</div> 
 <div>Box 3</div> 
 </body> 
 </html>

 
Auch hier wurden drei Boxen definiert. Box 1 ist absolut positioniert.

Bilder



Anders als bei der relativen Positionierung ist für Box 1 kein Platz reserviert. Die Boxen 2 und 3 rutschen nach oben.

Die Positionierungsangaben top, right, bottom oder left orientieren sich jetzt nicht mehr an der ursprünglichen Position der Box im Flow. Vielmehr beziehen sich die Angaben auf das nächste umgebende Element, das mit relative, absolute oder fixed positioniert wurde. Gibt es kein umgebendes Element, erfolgt die Positionierung relativ zum obersten Element des Dokumentbaums, also zu html.


 

Eine Positionierung mit fixed

Mit position: fixed lassen sich Elemente fixieren. Auch hierzu ein Beispiel:
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 p { margin-left: 25%; }
 #fixiert {
   position: fixed;
   top: 20px;
   left: 20px;
   background-color:#33FFCC;
   width: 20%;
   padding: 10px;
   border: 1px solid black;
 }
 </style>
 </head>
 <body>
 <div id="fixiert">Splitter-Effekt Teil 1</div>
 <p>Nur für kurze Zeit ist das neueste Tutorial oder Video-Training in der Online-Ansicht oder der Inhalt aus der Download-Kategorie punktefrei. Erfahre hier mehr ...</p> 
 </body>
 </html>

 
Die fixierte Box scrollt nicht mit, sondern bleibt immer an der ihr zugewiesenen Position stehen.

Bilder



Für fixierte Boxen ist das umgebende Element immer das Browserfenster.

Beachtet bitte, dass es gerade auch im Zusammenhang mit dem Fixieren von Elementen in älteren Browsern erhebliche Probleme gibt. So macht beispielsweise der IE6 hier nicht das, was er eigentlich machen sollte. Wer seine Webseiten auch für diesen Browser optimieren will/muss, hat nun zwei Möglichkeiten:

• Auf fixierte Boxen verzichten.
• Hacks für den IE verwenden.

Wenn ihr einen Hack verwenden wollt, empfehle ich euch die Seite http://thestyleworks.de/tut-art/iewinfixed.shtml.  Dort wird anhand eines kleinen JavaScripts gezeigt, wie man fixierte Boxen auch für diesen Browser hinbekommt.

Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von matino
  • 12.10.2016 - 17:25

Vielen Dank für das interessante Tutorial

Portrait von Kiasa
  • 24.04.2015 - 21:31

Danke für das Tutorial. Super gemacht und erklärt!

Portrait von Schoki
  • 01.04.2015 - 19:44

Danke für die Vertextung des Videos!

Portrait von ZainaPhoto
  • 29.03.2015 - 12:59

Das ist ein super Tutorial!

Lg Zaina

Portrait von blacksurgeon
  • 29.03.2015 - 09:12

Sehr verständlich und anschaulich!

Portrait von ZainaPhoto
  • 28.03.2015 - 20:35

Großen Dank für das Video.

LG Zaina

Portrait von dlieb
  • 27.03.2015 - 15:39

Vielen Dank für den Teil 37.

Portrait von MARIA52
  • 27.03.2015 - 14:58

Vielen Dank für den weiteren Teil des Tutorials.

Portrait von Mäuschen
  • 27.03.2015 - 14:45

Wieder sehr verständlich erklärt. Danke :-)

Portrait von arko2013
  • 27.03.2015 - 14:36

Danke für den weiteren informativen Teil!

Portrait von winzling
  • 27.03.2015 - 13:42

Vielen Dank.

Portrait von pallasathena
Portrait von Bijostone
  • 27.03.2015 - 12:44

Auch kann nur Danke sagen ist wieder ein Supertut. mit ganz vielen wertvollen Infos.
Danke

Portrait von rocking_sid
  • 27.03.2015 - 12:11

Vielen Dank für das sehr informative Tutorial!

Portrait von Domingo
  • 27.03.2015 - 11:54

Vielen Dank.

Portrait von suzana
  • 27.03.2015 - 11:46

Vielen Dank für das Tutorial.

Portrait von fe_web
  • 27.03.2015 - 11:46

Danke für dieses weitere Tutorial in dieser Serie. MfG

Portrait von BOPsWelt
  • 27.03.2015 - 11:40

Vielen Dank für den weiteren Teil des Tutorials. :)

Portrait von Caesarion2004
  • 27.03.2015 - 11:35

Vielen Dank für das interessante und informative Tutorial.

Portrait von Kundentest
  • 27.03.2015 - 11:15

Herzlichen Dank für das Tutorial.

x
×
×