CSS/Eigenschaften/Positionierung/position

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Positionierung(Weitergeleitet von Position)
Wechseln zu: Navigation, Suche

Elemente können durch Verwendung der Eigenschaft position aus dem normalen Elementfluss entfernt werden und an jede beliebige Stelle des Viewports positioniert werden. Auf andere Elemente haben positionierte Elemente keinen Einfluss.

position: absolute[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0

Mit position:absolute kann man Elemente losgelöst vom Textfluss positionieren, an eine Stelle, die per left, right, top und bottom festgelegt wird. Eine Lücke bleibt dabei nicht bestehen. Größenangaben, wie width und height, oder Abstände, wie margin und padding, sind ebenfalls möglich.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>position:absolute</title>
    <style>
      main { 
        position: relative; 
     }
      #info-box {
	border: 3px dashed #F00;
	padding: 10px;
        position: absolute;
        right: 1em;
        top: 0;
        width: 250px;
     }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>position:absolute</code></h1>
    <main>
      <p>Auf dieser Beispielseite möchten wir die Positionierung mit CSS zeigen. 
         In der rechten oberen Ecke des Dokuments wird eine grau umrahmte, absolut positionierte Box angezeigt.</p>
      <p>Lorem ipsum … </p>
      <div id="info-box">
        Dies könnte eine Info-Box sein, die einen Link, ein Bild oder ähnliches enthält. 
      </div>
    </main>
  </body>
</html>

Die Angaben left, right, top und bottom beziehen sich dabei auf das nächste Vorfahrenelement, welches mit position: positioniert wurde. Hat das Element keine solchen Vorfahrenelemente, wird als Bezugspunkt das Wurzelelement angesehen - in HTML-Dokumenten also das HTML-Element (bei XML wäre es das XML-Element). Im oberen Beispiel wird deshalb der Link mit der ID "info-box" relativ zum main-Element positioniert, wofür das main-Element die Eigenschaft position:relative erhält.

Möchte man eine Navigation bauen, in der sich die Untermenüs an der Hauptnavigation ausrichten, könnte man den Navigationspunkten der Hauptnavigation die Eigenschaft position:relative geben und hätte damit den Bezugspunkt für die jeweiligen Kind-Elemente geschaffen. Im Beispiel ist das einzige Kind-Element eine weitere Liste, die - dank absoluter Positionierung - aus dem Textfluss herausgenommen wird. Fährt man nun mit der Maus über einen Hauptlistenpunkt erscheint das Untermenü.

Beispiel ansehen …
<!DOCTYPE HTML>
<html>
  <head>
    <title>Positionierung mit CSS</title>
    <style>
      body { 
        max-width: 700px; 
        margin: auto; 
      }
      nav, nav > ul { 
        width: 100%; 
        margin: 0; 
        padding: 0;
      }
      nav > ul > li {
	position: relative;
	display: inline-block; 
        padding: 10px;
	background-color: #FEA;
	width: 100px;
      }
      nav > ul > li > ul {
	position: absolute;
	list-style-type: none;
	margin: 0; 
        padding: 10px;
	background-color: #AEF;
	top: 40px; 
        left: 0;
	width: 100px;
        display: none;
      }
      nav > ul > li:hover > ul { 
        display: block; 
      }
    </style>
  </head>
  <body>
    <h1>Positionierung mit CSS</h1>
    <p>Auf dieser Beispielseite möchten wir die Positionierung mit CSS zeigen. In dem untenstehenden Menü sind die
     Untermenüs am Listenelement der Hauptnavigation ausgerichtet.</p>
    <nav>
      <ul>
        <li>Menüpunkt 1
          <ul>
	    <li>Sub 1.1</li>
	    <li>Sub 1.2</li>
	    <li>Sub 1.3</li>
	    <li>Sub 1.4</li>
          </ul>
        </li>
        <li>Menüpunkt 2
	  <ul>
	    <li>Sub 2.1</li>
	    <li>Sub 2.2</li>
	    <li>Sub 2.3</li>
	    <li>Sub 2.4</li>
	  </ul>
        </li>
      </ul>
    </nav>
    <p>Lorem ipsum …</p>
  </body>
</html>

position: fixed[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0

Möchte man ein Element starr am Viewport ausrichten, (beispielsweise eine fixe Fußzeile oder einen Link zum Seitenanfang in einer Ecke) dann ist position:fixed das Mittel der Wahl. Genau wie bei position:absolute wird das Element aus dem Textfluss entnommen, es entsteht also keine Lücke. Positioniert wird klassisch mit den CSS-Eigenschaften top, bottom, left und right.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <title>Fixe Positionierung eines Elements</title>
    <style>
      #toplink { 
        position: fixed; 
        bottom: 0; 
        right: 0; 
      }
    </style>
  </head>
  <body>
    <h1 id="top">Überschrift</h1>
    <p>Lorem ipsum …</p>

    <p id="toplink"><a href="#top">zum Seitenanfang</a></p>

    <p>Duis autem …</p>
  </body>
</html>

position: relative[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0

Wie schon weiter oben erklärt, verwendet man position:relative als Bezugspunkt für absolut positionierte Kindelemente. Das Element an sich wird quasi "an sich selbst" ausgerichtet. Die Lücke im Textfluss bleibt bestehen. Trotzdem kann man das Element mit top, bottom, left und right ausrichten.

Beispiel ansehen …
<!DOCTYPE HTML>
<html>
  <head>
    <title>Fixe Positionierung eines Elements</title>
    <style>
	a { 
          position: relative; 
          top: -15px; 
          left: -20px; 
        }
    </style>
  </head>
  <body>
    <h1 id="top">Überschrift</h1>
    <p>Lorem ipsum. Gaudeamus igitur, iuvenus dum sumus. Beati pauperes spiritu. 
      <a href="http://example.com">Ein aus der Zeile geratener Link.</a>
      Und weiter im Text.
    </p>
  </body>
</html>

position: static[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0

position:static ist der Defaultwert der Eigenschaft position. Das Element verbleibt im Textfluss. Die Eigenschaften Top, Bottom, Left, Right werden ignoriert.

position: sticky[Bearbeiten]

position: sticky: Elemente mit dieser Eigenschaft behalten ihre Position im Elementfluss, bis sie das obere oder untere Seitenende erreichen und dort „kleben“ bleiben.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Empfehlung: Heben Sie bei kleinen Viewports position:sticky wieder auf.
Beispiel
@media all and (max-width: 35em) {
  #sticky {
    position: static;
  }
}
Beachten Sie: Firefox, Chrome und Opera haben einen Bug, der es in Firefox verhindert Tabellenelemente zu fixieren. In Chrome und Opera beschränkt sich der Bug auf thead und tr.


Achtung!

Die Eigenschaft position ist derzeit (Stand: März 2017) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Safari -webkit-position

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]