Σταθερή Θέση στο CSS

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

Κατά την κύλιση της σελίδας, τα απόλυτα τοποθετημένα στοιχεία θα κύλιζονται μαζί με τη σελίδα. Δείτε το παράδειγμα:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}

Μπορεί κανείς να κάνει έτσι ώστε κατά την κύλιση της σελίδας το τοποθετημένο στοιχείο να παραμένει στη θέση του. Για αυτό πρέπει να του οριστεί σταθερή τοποθέτηση χρησιμοποιώντας την ιδιότητα position με τιμή fixed:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: fixed; /* ορίζουμε σταθερή τοποθέτηση */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}