Ιδιότητα position στοιχείου στυλ

Ορισμός και χρήση

position Ορισμός και χρήση της ιδιότητας position για τη θέση του στοιχείου (στατικό, σχετικό, απόλυτο ή στατικό).

Δείτε επίσης：

CSS Εκμάθηση：CSS Πозиционισμός

CSS Εγχειρίδιο Αναφοράς：Ιδιότητα position

Παράδειγμα

Παράδειγμα 1

Αλλαγή της τοποθέτησης του στοιχείου <div> από σχετική σε αβέβαιη τοποθέτηση:

document.getElementById("myDIV").style.position = "absolute";

Προσπαθήστε να το δοκιμάσετε προσωπικά

Παράδειγμα 2

Χρήση διαφορετικών τύπων τοποθέτησης:

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Παράδειγμα 3

Επιστροφή της τοποθέτησης του στοιχείου <h2>:

alert(document.getElementById("myH2").style.position);

Προσπαθήστε να το δοκιμάσετε προσωπικά

Γλώσσα:

Επιστροφή της ιδιότητας position:

object.style.position

Ρύθμιση της ιδιότητας position:

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Τιμή ιδιότητας

Τιμή Περιγραφή
static Τα στοιχεία παρουσιάζονται κατά τη σειρά που εμφανίζονται στον ροή του έγγραφου. Προεπιλεγμένο.
absolute Το στοιχείο τοποθετείται σχετικά με τον πρώτο τοποθετημένο (μη στατικό) προγονικό του στοιχείο.
fixed Το στοιχείο τοποθετείται σχετικά με το παράθυρο του περιηγητή.
relative

Το στοιχείο τοποθετείται σχετικά με τη φυσική του θέση.

Επομένως, "left:20" αυξάνει τη θέση του αριστερού άκρου του στοιχείου κατά 20 εκατοστά.
sticky

Το στοιχείο τοποθετείται ανάλογα με τη θέση της κύλισης του χρήστη.

Τα σκληρά στοιχεία εναλλάσσονται μεταξύ relative και fixed ανάλογα με τη θέση της κύλισης.

Είναι σχετική τοποθέτηση μέχρι να βρεθεί η καθορισμένη θέση απόκλισης στην οπτική περιοχή - μετά από đó "κολλάει" στην κατάλληλη θέση (π.χ. position:fixed).

Σημειώσεις:Δεν υποστηρίζεται από τα IE/Edge 15 ή παλαιότερες εκδόσεις. Το Safari από την έκδοση 6.1 ξεκινά να υποστηρίζει το πρόθεμα Webkit.
initial Ρυθμίστε αυτήν την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Κληρονομεί αυτήν την ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: static
Αποτελεσμα: κείμενο, που δείχνει τον τύπο τοποθέτησης του στοιχείου.
CSS έκδοση: CSS2

Υποστήριξη ΒROWSERS

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη