CSS, HTML und Javascript mit {stil}

CSS top, right, bottom, left

position top right bottom left

CSS top, right, bottom und left regeln die Position von absolut oder fest (fixed) positionierten Blöcken gegen die Grenzen ihres Containers.

Der Inhalt von Blöcken mit position: relative wird durch top, right, bottom, left verschoben und hinterlässt eine Lücke.

Absolut oder fixed positionierte Blöcke werden aus dem normalen Fluss des Dokuments genommen. Ihr Container – der umfassende Block – ist entweder das Dokument oder ein relativ positionierter Block. Absolute Positionierung ist absolut nicht intuitiv …

top, right, bottom und left gelten nur für positionierte Elemente. Bei statischen Elementen wird der Abstand zum umfassenden Block durch margin-top, margin-right, margin-bottom und margin-left bestimmt und top, right, bottom, left haben keine Wirkung.

  • Liegt ein Element mit position : absolute oder position : fixed in einem relativ positionierten Element, bestimmten top, right, bottom und left den Abstand vom Rand des relativ positionierten Elements.
  • Liegt ein positioniertes Element in einem statischen Element (ohne Positionierung), ist top, right, bottom und left der Abstand vom Rand des Dokuments.
position top right bottom left top>0 right>0 bottom>0 left>0 position: absolute top<0 right<0 bottom<0 left<0

Mit positiven Werte versetzen top, right, bottom und left ein positioniertes Element innerhalb ihres Containers. Negative Werte positionieren das Elemente über, rechts von, unter bzw. links vom Container.

Wenn für ein Element sowohl top als auch bottom gesetzt werden, wird das Element nicht auf die Größe des umfassenden Containers aufgezogen, sondern top gewinnt. Auf gleiche Weise gewinnt left vor right.

Text über einem Bild positionieren

Eine Anwendung von relativer und absoluter Positionierung mit top, right, bottom und left ist das Setzen von Text über Bilder.

Bildunterschrift über ein Bild legen

Künstlerpapiere

Echt-Bütten Aquarellpapiere für Gouache, Tempera, Lavis, Deckfarben und Zeichnen mit Kohle, Bleistift und Farbstiften

CSS top, right, bottom und left haben numerische Werte – sind also animierbar.
<style>
figure { 
   position: relative;
}
figure img { 
   display: block; 
}
figcaption { 
   position: absolute; 
   bottom: -120px;
   transition: bottom 1s;
}
</style>
…
<figure class="caption">
   <img src="aquarell.jpg" width="720" height="480" alt="aquarell">
   <figcaption>
      <h4>Künstlerpapiere</h4>
      <p>Echt-Bütten Aquarellpapiere für Gouache, …</p>
   </figcaption>
</figure>

margin-top vs top

Bei relativ oder statisch positionierten Blöcken regeln margin-top und margin-bottom den Abstand der Box von vorangehenden bzw. folgenden Blöcken und margin-left bzw. margin-right den Abstand vom linken / rechten Rand des umfassenden Blocks.

margin-top, margin-right, margin-bottom und margin-left in Blöcken mit position:relativ / position: none margin-topmargin-bottommargin-rightmargin-leftrelativ / statisch positioniert

Bei Blöcken mit position:absolute oder position:fixed regeln top, right, bottom und left den Abstand zur umfassenden Box. Absolut / fixed positionierte Blöcke kümmern sich nicht um vorangehende oder folgende Blöcke.

top, right, bottom und left in Blöcken mit position:absolute / fixedabsolut / fixed positionierttopbottomrightleft

CSS top | right | bottom | left

CSS top, right, bottom und left steuern den Abstand der absolut positionierten gelben Box vom Rand des Dokuments bzw. Rand eines relativ positionierten umfassenden Blocks.

Erblich: Nein

top right bottom left
top ist der Abstand des oberen Randes des Inhalts zum oberen Rand des umfassenden Blocks.
right ist der Abstand des rechten Randes des Inhalts zum rechten Rand des umfassenden Blocks.
bottom ist der Abstand des unteren Randes des Inhalts zum unteren Rand des umfassenden Blocks.
left ist der Abstand des linken Randes des Inhalts zum linken Rand des umfassenden Blocks.
Werte
<length> | <percentage> | auto | inherit
auto (Voreinstellung)
legt fest, dass der Browser den Abstand zum umfassenden Block bestimmt. Wenn sowohl width oder height als auch right oder left als "auto" angegeben werden, wird die Breite des Elements durch seine Inhalte bestimmt (ähnlich wie bei Tabellen).
<length>
cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage>
legt den Abstand des Elements zum umfassenden Block relativ zur Größe des umfassenden Blocks fest. Das Prozentzeichen ist zwingend erforderlich.