Απόλυτη Θέση χωρίς Συντεταγμένες στο CSS
Στην πραγματικότητα, ο καθορισμός συντεταγμένων στην απόλυτη
θέση δεν είναι υποχρεωτικός. Εάν σε ένα στοιχείο
απλά γράψουμε position με τιμή
absolute, τότε θα γίνει απόλυτα τοποθετημένο,
αλλά θα παραμείνει στη θέση που
βρισκόταν. Σε αυτή την περίπτωση, όλα τα άλλα στοιχεία θα
συμπεριφέρονται σαν το στοιχείο μας να μην υπάρχει
και μπορεί να το επικαλύψουν.
Ας δούμε μερικά παραδείγματα.
Παράδειγμα
Αρχικά, ας δημιουργήσουμε τρία μπλοκ χωρίς θέση και ανάμεσά τους κάποιο κείμενο:
<div id="elem1"></div>
<div id="elem2"></div>
κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Παράδειγμα
Τώρα ας προσθέσουμε absolute στο πράσινο μπλοκ.
Ως αποτέλεσμα, αυτό το μπλοκ θα παραμείνει στη θέση του,
ενώ όλα τα στοιχεία από κάτω θα συμπεριφέρονται σαν
το στοιχείο μας να μην υπάρχει και θα το επικαλύψουν:
<div id="elem1"></div>
<div id="elem2"></div>
κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Παράδειγμα
Τώρα ας προσθέσουμε την ιδιότητα left,
χωρίς να προσθέσουμε θέση στην κάθετη διεύθυνση. Ως αποτέλεσμα,
στην οριζόντια διεύθυνση το μπλοκ μας θα τοποθετηθεί στην καθορισμένη
τιμή, ενώ στην κάθετη διεύθυνση - θα παραμείνει
εκεί που βρισκόταν:
<div id="elem1"></div>
<div id="elem2"></div>
κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* προσθέτουμε θέση στην οριζόντια διεύθυνση */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Παράδειγμα
Τώρα ας προσθέσουμε, αντίστροφα, την ιδιότητα
top, χωρίς να προσθέσουμε θέση στην οριζόντια διεύθυνση.
Ως αποτέλεσμα, στην κάθετη διεύθυνση το μπλοκ μας θα τοποθετηθεί
στην καθορισμένη τιμή, ενώ στην οριζόντια διεύθυνση -
θα παραμείνει εκεί που βρισκόταν:
<div id="elem1"></div>
<div id="elem2"></div>
κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* προσθέτουμε θέση στην κάθετη διεύθυνση */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
