Διάταξη CSS - Η ιδιότητα θέσης

Πίνακας περιεχομένων

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

Η θέση Ιδιότητα

Η ιδιότητα position καθορίζει τον τύπο της μεθόδου τοποθέτησης που χρησιμοποιείται για ένα στοιχείο.

Υπάρχουν πέντε διαφορετικές τιμές θέσης:

static
relative
fixed
absolute
sticky

Στη συνέχεια, τα στοιχεία τοποθετούνται χρησιμοποιώντας το πάνω, κάτω, αριστερά και δεξιά ιδιότητες. Ωστόσο, αυτές οι ιδιότητες δεν θα λειτουργήσουν εκτός εάν η θέση η ιδιοκτησία ορίζεται πρώτα. Λειτουργούν επίσης διαφορετικά ανάλογα με τη θέση αξία.

Ιδιότητα CSS `position: static;`

Τα στοιχεία HTML τοποθετούνται στατικά από προεπιλογή.

Τα στατικά τοποθετημένα στοιχεία δεν επηρεάζονται από τις ιδιότητες πάνω, κάτω, αριστερά και δεξιά.

Ένα στοιχείο με position: static; δεν τοποθετείται με κάποιον ειδικό τρόπο. είναι τοποθετείται πάντα σύμφωνα με την κανονική ροή της σελίδας:

This <div> element has position: static;

Εδώ είναι το CSS που χρησιμοποιείται:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

Ιδιότητα CSS `position: σχετική;`

Ένα στοιχείο με position: relative; τοποθετείται σε σχέση με την κανονική του θέση.

Η ρύθμιση των ιδιοτήτων πάνω, δεξιά, κάτω και αριστερά ενός σχετικά τοποθετημένου στοιχείου θα προκαλέσει να ρυθμιστεί μακριά από την κανονική του θέση. Το άλλο περιεχόμενο δεν θα προσαρμοστεί ώστε να ταιριάζει σε οποιοδήποτε κενό που αφήνει το στοιχείο.

This <div> element has position: relative;

Εδώ είναι το CSS που χρησιμοποιείται:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

Η ιδιότητα CSS `position: fixed;`

Ένα στοιχείο με position: fixed; τοποθετείται σε σχέση με τη θύρα προβολής, πράγμα που σημαίνει ότι πάντα παραμένει στην ίδια θέση ακόμα κι αν η σελίδα έχει κύλιση. Η κορυφή, Οι ιδιότητες δεξιά, κάτω και αριστερά χρησιμοποιούνται για την τοποθέτηση του στοιχείου.

Ένα σταθερό στοιχείο δεν αφήνει κενό στη σελίδα όπου κανονικά θα βρισκόταν.

Παρατηρήστε το σταθερό στοιχείο στην κάτω δεξιά γωνία της σελίδας. Εδώ είναι το CSS που χρησιμοποιείται:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

This <div> element has position: fixed;

Ιδιότητα CSS `position: απόλυτη;`

Ένα στοιχείο με position: absolute; τοποθετείται σε σχέση με τον πλησιέστερο τοποθετημένο πρόγονο (αντί να τοποθετηθεί σε σχέση με το παράθυρο προβολής, όπως σταθερό).

Ωστόσο; εάν ένα απόλυτο τοποθετημένο στοιχείο δεν έχει τοποθετημένους προγόνους, χρησιμοποιεί το σώμα του εγγράφου και κινείται παράλληλα με την κύλιση της σελίδας.

Σημείωση: Τα απόλυτα τοποθετημένα στοιχεία αφαιρούνται από την κανονική ροή και μπορεί να επικαλύπτουν στοιχεία.

Εδώ είναι ένα απλό παράδειγμα:

This <div> element has position: relative;

This <div> element has 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;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

Ιδιότητα CSS `position: sticky;`

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

Ένα κολλώδες στοιχείο εναλλάσσεται μεταξύ σχετικό και διορθωμένο, ανάλογα με τη θέση κύλισης. Τοποθετείται σχετικά έως ότου επιτευχθεί μια δεδομένη θέση μετατόπισης στο παράθυρο προβολής - μετά "κολλάει" στη θέση του (όπως θέση:σταθερή).

Σημείωση: Το Internet Explorer δεν υποστηρίζει σταθερή τοποθέτηση. Το Safari απαιτεί ένα -webkit- πρόθεμα (βλ. παράδειγμα παρακάτω). Πρέπει επίσης να καθορίσετε τουλάχιστον ένα από τα top, δεξιά, κάτω ή αριστερά για κολλώδης τοποθέτηση στην εργασία.

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

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

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

Παράδειγμα

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Δοκιμάστε το μόνοι σας:

Πάνω αριστερά →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

Επάνω δεξιά →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

Κάτω αριστερά →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

Κάτω δεξιά →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

Στο κέντρο →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

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

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

Ορίστε το σχήμα ενός στοιχείου

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">

</body>
</html>

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

bottom: Ορίζει την κάτω άκρη περιθωρίου για ένα τοποθετημένο πλαίσιο
clip: Κλιπ ένα απολύτως τοποθετημένο στοιχείο
left: Ορίζει την αριστερή άκρη περιθωρίου για ένα τοποθετημένο πλαίσιο
position: Καθορίζει τον τύπο τοποθέτησης για ένα στοιχείο
right: Ορίζει τη δεξιά άκρη περιθωρίου για ένα τοποθετημένο πλαίσιο
top: Ορίζει την άνω άκρη περιθωρίου για ένα τοποθετημένο πλαίσιο

Διάταξη CSS - Η ιδιότητα θέσης

Πίνακας περιεχομένων

Η θέση Ιδιότητα

Ιδιότητα CSS position: static;

Παράδειγμα

Ιδιότητα CSS position: σχετική;

Παράδειγμα

Η ιδιότητα CSS position: fixed;

Παράδειγμα

Ιδιότητα CSS position: απόλυτη;

Παράδειγμα

Ιδιότητα CSS position: sticky;

Παράδειγμα

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

Παράδειγμα

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

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

Ιδιότητα CSS `position: static;`

Ιδιότητα CSS `position: σχετική;`

Η ιδιότητα CSS `position: fixed;`

Ιδιότητα CSS `position: απόλυτη;`

Ιδιότητα CSS `position: sticky;`