Παράδειγμα: η ιδιότητα top του CSS
- την προηγούμενη σελίδα text-underline-position
- Παράδειγμα: Επόμενη Σελίδα transform
Ορισμός και χρήση
Η ιδιότητα top καθορίζει την επάνω ακροάγραφο του στοιχείου. Η ιδιότητα καθορίζει την απόκλιση της εξωτερικής ακροάγραφο του στοιχείου από την επάνω ακροάγραφο του περιέχοντος στοιχείου.
Σημείωση:Αν η τιμή της ιδιότητας position είναι static, η ρύθμιση της ιδιότητας top δεν έχει καμία επίδραση.
Σημείωση
Για στοιχεία που ορίζονται ως στατική, είναι auto; Για τιμές μήκους, είναι η αντίστοιχη αbsolute μήκος; Για ποσοστά, είναι η καθορισμένη τιμή; Εκτός αυτών, είναι auto.
Για στοιχεία που ορίζονται ως σχετικά, αν τα top και bottom είναι όλα auto, οι τιμές τους είναι όλες 0; Αν το ένα από αυτά είναι auto, τότε η τιμή του άλλου είναι το αντίθετο; Αν και τα δύο δεν είναι auto, η τιμή του bottom είναι το αντίθετο της τιμής του top.
Για περισσότερες πληροφορίες:
Εκμάθηση CSS:Στατική τοποθέτηση CSS
Εγχειρίδιο HTML DOM:ιδιότητα top
Παράδειγμα
Ρυθμίστε την επάνω κύρια γραμμή της εικόνας 5 εικονοστοιχεία κάτω από την επάνω κύρια γραμμή του περιέχοντος στοιχείου:
img
{
position:absolute;
top:5px;
}
Γλώσσα σύνταξης CSS
top: auto|length|initial|inherit;
Τιμή ιδιότητας
| Τιμή | Περιγραφή |
|---|---|
| auto | Προεπιλεγμένη τιμή. Η θέση της επάνω κύριας γραμμής υπολογίζεται από το πρόγραμμα περιήγησης. |
| % | Ρυθμίζει την επάνω θέση του στοιχείου με το ποσοστό περιλαμβανομένου του στοιχείου. Μπορεί να χρησιμοποιηθούν αρνητικές τιμές. |
| length | Ρυθμίζει την επάνω θέση του στοιχείου με χρήση μονάδων όπως px, cm κ.λπ. Μπορεί να χρησιμοποιηθούν αρνητικές τιμές. |
| inherit | Καθορίζει ότι η τιμή της ιδιότητας top πρέπει να κληθεί από το γονικό στοιχείο. |
Τεχνικά λεπτομέρειες
| Προεπιλεγμένη τιμή: | auto |
|---|---|
| Αντιληπτικότητα: | no |
| Έκδοση: | CSS2 |
| Γλώσσα σύνταξης JavaScript: | object.style.top="50px" |
Περισσότερες παραδείξεις
- Ρύθμιση της επάνω κύριας γραμμής της εικόνας με σταθερή τιμή
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε σταθερή τιμή για να ρυθμίσετε την επάνω κύρια γραμμή της εικόνας.
- Ρύθμιση της επάνω κύριας γραμμής της εικόνας με ποσοστό
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε το ποσοστό για να ρυθμίσετε την επάνω κύρια γραμμή της εικόνας.
Υποστήριξη του προγράμματος περιήγησης
Τα αριθμητικά στοιχεία της τάβλας σημειώνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτή την ιδιότητα.
| Παράδειγμα: το Chrome | Παράδειγμα: το IE / Edge | Παράδειγμα: το Firefox | Παράδειγμα: το Safari | Παράδειγμα: το Opera |
|---|---|---|---|---|
| 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- την προηγούμενη σελίδα text-underline-position
- Παράδειγμα: Επόμενη Σελίδα transform
