Αρνητικές τιμές στο positioning στο CSS
Οι ιδιότητες top, right,
bottom και left που έχουμε μελετήσει μπορούν να πάρουν
όχι μόνο θετικές, αλλά και αρνητικές
τιμές. Ας δούμε μερικά παραδείγματα.
Παράδειγμα
Στο επόμενο παράδειγμα, το στοιχείο τοποθετείται απόλυτα
σε σχέση με τον γονέα του και βρίσκεται στη θέση
0 από πάνω, 0 από αριστερά:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Παράδειγμα
Και τώρα ας μετακινήσουμε το στοιχείο στη θέση
-20px από πάνω, -30px από αριστερά:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Στο επόμενο δείγμα, το πράσινο μπλοκ βρίσκεται στο
κέντρο της οθόνης χρησιμοποιώντας margin, και
τα κόκκινα μπλοκ τοποθετούνται σε σχέση
με αυτό. Επαναλάβετε τη σελίδα σύμφωνα με
το παρεχόμενο δείγμα:
