Διάταξη CSS - Αξία position

position Η ιδιότητα καθορίζει τον τύπο της μέθοδου τοποθέτησης του στοιχείου (static, relative, fixed, absolute ή sticky).

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

这个 <div> 元素设置了 position: static;

这是所用的 CSS：

Παράδειγμα

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Δοκιμάστε το προσωπικά

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

这个 <div> 元素设置了 position: relative;

这是所用的 CSS：

Παράδειγμα

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Δοκιμάστε το προσωπικά

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

请注意页面右下角的这个固定元素。这是所用的 CSS：

Παράδειγμα

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Δοκιμάστε το προσωπικά

这个 <div> 元素设置了 position: fixed;

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

Σημείωση:“被定位的”元素是其位置除 static 以外的任何元素。

这是一个简单的例子：

这个 <div> 元素设置了 position: relative;
这个 <div> 元素设置了 position: absolute;

这是所用的 CSS：

Παράδειγμα

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Δοκιμάστε το προσωπικά

position: sticky;

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

Τα στοιχεία stickiness τοποθετούνται ανάλογα με τη θέση κύλισης στο σχετικό (relative) και τοποθετημένο (fixed) μεταξύ τους. Πρχάλα θα είναι τοποθετημένο με απόλυτη τοποθέτηση, μέχρι να βρεθεί η θέση κύλισης - και στη συνέχεια θα τοποθετηθεί στη θέση που επιθυμείτε (π.χ. position:fixed).

Σημείωση:O Internet Explorer, ο Edge 15 και οι παλιότερες εκδόσεις δεν υποστηρίζουν τοποθέτηση stickiness. Το Safari χρειάζεται το πρόθεμα -webkit- (βλέπε παρακάτω παράδειγμα). Επίσης, πρέπει να καθοριστεί τουλάχιστον top、right、bottom ή left ένα από αυτά, ώστε να λειτουργήσει η τοποθέτηση stickiness.

Σε αυτό το παράδειγμα, όταν φτάσει στη θέση κύλισης, το στοιχείο sticky θα παραμείνει στην κορυφή της σελίδας (top: 0)

Παράδειγμα

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Δοκιμάστε το προσωπικά

Επικαλυπτόμενα στοιχεία

Κατά τη τοποθέτηση των στοιχείων, μπορούν να επικαλύπτονται με άλλα στοιχεία.

z-index Η ιδιότητα καθορίζει τη σειρά στρώσης του στοιχείου (ποιο στοιχείο θα τοποθετηθεί μπροστά από άλλο στοιχείο ή πίσω από αυτό).

Τα στοιχεία μπορούν να ρυθμίσουν θετική ή αρνητική σειρά στρώσης:

Αυτό είναι ένα τίτλος

Επειδή το z-index της εικόνας είναι -1, βρίσκεται πίσω από το κείμενο.

Παράδειγμα

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Δοκιμάστε το προσωπικά

Τα στοιχεία με υψηλότερη σειρά στρώσης πάντα βρίσκονται μπροστά από τα στοιχεία με χαμηλότερη σειρά στρώσης.

Σημείωση:Αν δύο τοποθετημένα στοιχεία επικαλύπτονται χωρίς να καθοριστεί z-indexΑν δεν καθοριστεί, τότε το τελευταίο στοιχείο του HTML κώδικα θα εμφανιστεί στην κορυφή.

Τοποθεσία κειμένου μέσα σε εικόνα

Πώς να τοποθετήσετε κείμενο σε εικόνα:

Παράδειγμα

CodeW3C.com Λογότυπο
Κάτω Αριστερά
Άνω Αριστερά
Άνω Δεξιά
Κάτω Δεξιά
Κεντρικό

Δοκιμάστε το προσωπικά:

Άνω Αριστερά Άνω Δεξιά Κάτω Αριστερά Κάτω Δεξιά Κεντρικό

Περισσότερα παραδείγματα

Ρύθμιση της μορφής του στοιχείου
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσεις τη μορφή ενός στοιχείου. Το στοιχείο κόβεται σε αυτή τη μορφή και εμφανίζεται.

Όλες οι CSS τοποθετητικές ιδιότητες

Αξία Περιγραφή
bottom Θέτει την εξωτερική γωνία της κάτω κορυφής του πλαισίου τοποθέτησης.
clip Κατακράτηση των στοιχείων της αμετάβλητης θέσης.
left Ρύθμιση του αριστερού περιθωρίου εξωτερικής γωνίας του πλαίσια θέσης.
position Καθορίζει τον τύπο θέσης στοιχείου.
right Ρύθμιση του δεξιού περιθωρίου εξωτερικής γωνίας του πλαίσια θέσης.
top Ρύθμιση της άνω περιθωρίου εξωτερικής γωνίας του πλαίσια θέσης.
z-index Ρύθμιση της σειράς τακτοποίησης στοιχείων.

Εκτεταμένη ανάγνωση

Βιβλίο εκτός προγράμματος:Εισαγωγή στη θέση CSS

Βιβλίο εκτός προγράμματος:CSS σχετική θέση

Βιβλίο εκτός προγράμματος:CSS αμετάβλητη θέση