CSS -Top- Eigenschaft
Beispiel
Setzen Sie die Oberkante des positionierten <div>-Elements 50 Pixel nach unten von der Oberkante seines nächsten positionierten Vorfahren:
div {
position: absolute;
top:
50px;
border: 3px solid green;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die topEigenschaft wirkt sich auf die vertikale Position eines positionierten Elements aus. Diese Eigenschaft hat keine Auswirkung auf nicht positionierte Elemente.
- Wenn Position: absolut; oder Position: fest; - Die
topEigenschaft setzt die Oberkante eines Elements auf eine Einheit über/unter der Oberkante des am nächsten positionierten Vorfahren. - Wenn Position: relativ; - Die
topEigenschaft bewirkt, dass sich die Oberkante des Elements über/unter seine normale Position bewegt. - Wenn Position: klebrig; - Die
topEigenschaft verhält sich so, als wäre ihre Position relativ, wenn sich das Element innerhalb des Ansichtsfensters befindet, und als wäre ihre Position fest, wenn es sich außerhalb befindet. - Wenn Position: statisch; - Die
topEigenschaft hat keine Auswirkung.
| Standardwert: | Auto |
|---|---|
| Vererbt: | Nein |
| Animierbar: | ja. Lesen Sie mehr über animierbare |
| Ausführung: | CSS2 |
| JavaScript-Syntax: | Objekt .style.top="100px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| top | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
CSS-Syntax
top: auto|length|initial|inherit;
Eigenschaftswerte
| Value | Description | Play it |
|---|---|---|
| auto | Lets the browser calculate the top edge position. This is default | |
| length | Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units | |
| % | Sets the top edge position in % of containing element. Negative values are allowed | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Verwenden Sie die top-Eigenschaft mit einem negativen Wert und für ein Element ohne positionierte Vorfahren:
div.b {
position: absolute;
top: -20px;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 150px;
border: 3px solid green;
}
Verwandte Seiten
CSS-Tutorial: CSS-Positionierung
CSS-Referenz: untere Eigenschaft
CSS-Referenz: linke Eigenschaft
CSS-Referenz: richtige Eigenschaft
HTML-DOM-Referenz: Top-Eigenschaft