Σχεδιασμός Στήλης - Χαρακτηριστικό z-index

z-index προσδιορίζει τη σειρά κατάταξης του στοιχείου.

η ιδιότητα z-index

Όταν τα στοιχεία τοποθετούνται, μπορεί να επικάθονται με άλλα στοιχεία.

z-index προσδιορίζει τη σειρά κατάταξης του στοιχείου (ποιο στοιχείο πρέπει να βρίσκεται μπροστά, ποιο στοιχείο πρέπει να βρίσκεται πίσω).

Η σειρά κατάταξης των στοιχείων μπορεί να είναι θετική ή αρνητική:

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

διότι το εικόνα z-index είναι -1, οπότε θα τοποθετηθεί πίσω από το κείμενο.

παράδειγμα

img {
  θέση: αβέβαιη;
  αριστερά: 0px;
  top: 0px;
  z-index: -1;
}

Δοκιμάστε το Εγκεφαλικά

Λάβετε υπόψηz-index υπολείπεται μόνο γιαστοιχεία τοποθεσίας(θέση: αβέβαιη、θέση: σχετική、θέση: ακίνητη ή θέση: κολλητή) καιελαστικό στοιχείο(προβολή: ελαστική θετικός ή αρνητικός αριθμός:

ένας άλλος παράδειγμα z-index

παράδειγμα

Εδώ, βλέπουμε ότι τα στοιχεία με μεγαλύτερη σειρά κατάταξης πάντα βρίσκονται πάνω από τα στοιχεία με μικρότερη σειρά κατάταξης:

<html>
<head>
<style>
.container {
  θέση: σχετική;
}
.black-box {
  θέση: σχετική;
  z-index: 1;
  συνοριακή γραμμή: 2px ελαφρώς σκούρο γκρίζο;
  height: 100px;
  μαργίνα: 30px;
}
.gray-box {
  θέση: αβέβαιη;
  z-index: 3;
  παρασκηνία: χλωμό γκρι;
  υψόμετρο: 60px;
  πλάτος: 70%;
  αριστερά: 50px;
  top: 50px;
}
.green-box {
  θέση: αβέβαιη;
  z-index: 2;
  παρασκηνία: χλωμό πράσινο;
  πλάτος: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

Δοκιμάστε το Εγκεφαλικά

χωρίς z-index

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

παράδειγμα

Ωστόσο, εδώ δεν έχει οριστεί z-index：

<html>
<head>
<style>
.container {
  θέση: σχετική;
}
.black-box {
  θέση: σχετική;
  συνοριακή γραμμή: 2px ελαφρώς σκούρο γκρίζο;
  height: 100px;
  μαργίνα: 30px;
}
.gray-box {
  θέση: αβέβαιη;
  παρασκηνία: χλωμό γκρι;
  υψόμετρο: 60px;
  πλάτος: 70%;
  αριστερά: 50px;
  top: 50px;
}
.green-box {
  θέση: αβέβαιη;
  παρασκηνία: χλωμό πράσινο;
  πλάτος: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

Δοκιμάστε το Εγκεφαλικά

Χαρακτηριστικά CSS

Χαρακτηριστικό Περιγραφή
z-index Ρύθμιση της σειράς στρώσεων του στοιχείου.