CSS/Eigenschaften/Positionierung/top

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Angabe top (Startposition von oben) bestimmt, wo die obere Begrenzung eines positionierten Elementes verläuft.

  • CSS 1.0
  • CSS 2.1
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>top</title>
    <style>
      main {
        position: relative;
      }
      section {
        position: absolute;
        left: 300px;
        top: 100px;
        width: 250px;
        height: 380px;
        background-color: #F1F3F4;
      }
      img {
        position: absolute;
        top: 180px;
      }
      p {
        position: absolute;
        top: 136px;
        width: 208px;
        background-color: #FFFFE0;
        border: 1px solid #804000;
        margin: 0;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>top</code></h1>
    <main>
      <p>
        <img src="http://wiki.selfhtml.org/images/3/31/Hund.gif" width="208" height="181" alt="Hund">
      </p>
      <p>Dies ist ein absolut positionierter Text über einer
        absolut positionierten Grafik.
      </p>
      <section>
        <img src="http://wiki.selfhtml.org/images/3/31/Hund.gif" width="208" height="181" alt="Hund">
        <p>Dies ist ein absolut positionierter Text über einer
          absolut positionierten Grafik.
        </p>
        Dasselbe noch einmal, jetzt in einem
        <code>section</code>-Element.
      </section>
    </main>
  </body>
</html>
Die Angabe body {position: relative;} legt das body-Element als Bezugs„punkt“ für die absolute Positionierung fest. Darauf könnte in diesem einfachen Beispiel zwar verzichtet werden; in konkreten Projekten führt dies jedoch häufig zu unerwarteten Darstellungen.

Mit top können Sie die Startposition von oben bestimmen. Erlaubt sind dabei folgende Angaben:

Beachten Sie: Die Angabe top gilt nur für Elemente, deren position-Wert relative, absolute oder fixed ist.
Die Angabe ist der Abstand des oberen Randes des Elements zum oberen Rand seines Bezugselementes, ggf. zuzüglich eines margin-top des Elements. Ein oberer Innenabstand des Bezugselements wird hingegen nur berücksichtigt, wenn für top kein konkreter Abstand angegeben wurde (also top: auto;).

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML