Ιδιότητα position

Η ιδιότητα position ορίζει τον τρόπο τοποθέτησης των στοιχείων. Αυτή η ιδιότητα χρησιμοποιείται συχνότερα σε συνδυασμό με τις ιδιότητες top, right, bottom, left, που ορίζουν τα περιθώρια από πάνω, δεξιά, κάτω, αριστερά αντίστοιχα.

Σύνταξη

επιλογέας {
	position: absolute | relative | fixed | static | sticky;
}

Τιμές για position

Τιμή	Περιγραφή
`absolute`	Απόλυτη τοποθέτηση. Το στοιχείο αφαιρείται από την κανονική ροή του εγγράφου και τοποθετείται σε σχέση με τον πλησιέστερο προγονικό με τοποθέτηση (εάν υπάρχει) ή σε σχέση με το παράθυρο του προγράμματος περιήγησης.
`relative`	Σχετική τοποθέτηση. Το στοιχείο μετατοπίζεται σε σχέση με την κανονική του θέση στη ροή του εγγράφου, αλλά ο χώρος που καταλάμβανε, παραμένει δεσμευμένος.
`fixed`	Σταθερή τοποθέτηση. Το στοιχείο αφαιρείται από την κανονική ροή του εγγράφου και τοποθετείται σε σχέση με το παράθυρο του προγράμματος περιήγησης. Παραμένει στη θέση του κατά την κύλιση της σελίδας.
`static`	Στατική τοποθέτηση. Η τιμή σημαίνει απουσία τοποθέτησης και το στοιχείο συμπεριφέρεται ως συνήθως.
`sticky`	Κολλητή τοποθέτηση. Το στοιχείο συμπεριφέρεται σαν `relative`, μέχρι να φτάσει σε μια καθορισμένη θέση κατά την κύλιση, μετά από την οποία κολλάει στην καθορισμένη θέση (σαν `fixed`).

Προεπιλεγμένη τιμή: static.

Παράδειγμα . Απόλυτη τοποθέτηση

Ας τοποθετήσουμε ένα στοιχείο στην επάνω αριστερή γωνία της οθόνης με μικρά περιθώρια:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Παράδειγμα . Απόλυτη τοποθέτηση

Και τώρα ας τοποθετήσουμε ένα στοιχείο στην επάνω δεξιά γωνία της οθόνης με μικρά περιθώρια:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Παράδειγμα . Σταθερή τοποθέτηση

Με σταθερή τοποθέτηση το στοιχείο θα παραμένει στη θέση του κατά την κύλιση:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Παράδειγμα . Σχετική τοποθέτηση

Με σχετική τοποθέτηση το στοιχείο μετατοπίζεται σε σχέση με την κανονική του θέση, αλλά τα άλλα στοιχεία συμπεριφέρονται σαν το στοιχείο να μην είχε μετατοπιστεί:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Παράδειγμα . Ένθεση

Εάν το γονικό στοιχείο έχει την ιδιότητα position με τιμή relative, τότε τα απόλυτα τοποθετημένα στοιχεία θα τοποθετούνται σε σχέση με το γονικό στοιχείο:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Παράδειγμα . Ένθεση

Εάν το γονικό στοιχείο έχει την ιδιότητα position με τιμή absolute, τότε τα απόλυτα τοποθετημένα στοιχεία θα τοποθετούνται σε σχέση με το γονικό στοιχείο:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Παράδειγμα . Κολλητή τοποθέτηση

Εάν για ένα στοιχείο η ιδιότητα position έχει τιμή sticky, τότε το στοιχείο συμπεριφέρεται σαν relative, μέχρι να φτάσει σε μια καθορισμένη θέση κατά την κύλιση, μετά από την οποία κολλάει στη θέση. Ας φτιάξουμε μια κολλητή κεφαλίδα:

<h1>Κύρια Κεφαλίδα Ιστότοπου</h1>

<div class="header">κεφαλίδα κεφαλίδα κεφαλίδα</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Παράδειγμα . Χωρίς θέση

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

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Παράδειγμα . Μια άξονας

Με απόλυτη τοποθέτηση μπορεί να καθοριστεί θέση μόνο σε έναν άξονα. Για παράδειγμα, εάν ορίσουμε την ιδιότητα top, τότε κάθετα το στοιχείο θα τοποθετηθεί στην απαιτούμενη θέση, ενώ οριζόντια θα παραμείνει στη θέση, που βρισκόταν:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Παράδειγμα . Όλες οι θέσεις

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

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Δείτε επίσης

η ιδιότητα z-index,
που ορίζει την επικάλυψη στοιχείων