CSS ερώτηση

[alexiosd]

Καλησπέρα, μπορεί κάποιος να μου εξηγήσει πως δουλεύει το position absolute και relative καθώς και να μου εξηγήσει τις διαφορες του margin-top με το top

[dominotrix]

Αν και υπαρχει απειρο documentation online: το absolute κανει το αντικειμενο positioning βαση του parent element που το περιεχει. Αν το parent element δεν εχει posision relative τοτε θα κανει positioning βαση του πιο "εξω" element. Αν κανενα element δεν εχει τιμη relative τοτε θα το κανει βαση ολης της σελιδας.

 

πχ Βαζεις ενα ποτηρι σε ενα κουτι. Οι τιμες px που θα του δωσεις θα ειναι σχετικες -> relative δηλαδη βαση του κουτιου που περιεχει το ποτηρι. Αν το κουτι (parent div) δεν εχει position:relative; τοτε σημαινει πως το ποτηρι (absolute) ειναι positioned βαση του τραπεζιου που καθονται και τα 2 και οχι βαση κουτιου. Αν το τραπεζι (grand-parent div) δεν εχει ουτε αυτο position:relative; τοτε το ποτηρι γινεται positioned βαση του.. δωματιου (!).

 

Μπορει να ειναι λιγο ακυρο το παραδειγμα, αλλα ελπιζω να καταλαβες τι εννοω!

 

Τωρα οσον αφορα το margin-top και το top.

 

Το margin σημαινει οτι ενα element θα "σκουντηξει" τα αντικειμενα απο πανω του για να κουνηθει προς τα κατω. Σκεψου 2 κουτια το ενα κατω απο το αλλο (Α και Β). Αν δωσεις στο κουτι Β margin-top:20px; τοτε το κουτι αυτο θα σπρωξει τον εαυτο του (!) με τα χερια του (!!!) απο πανω και θα κουνηθει 20px προς τα κατω. Σα να σκουντας ενα τοιχο. Με την δυναμη που βαζεις εμπρος, δε κουνιεται ο τοιχος, αλλα εσυ προς τα πισω. Makes sense?

 

Τωρα το top δε λειτουργει ποτε μονο του. Κανει adapt παντοτε με το position. Στην ουσια δηλωνεις τι ειδους position θα εχει ενα element (fixed, absolute, relative) και επειτεα δηλωνεις τι θεση θα εχει το εκαστοτε element βαση top, bottom, left, right. Εχει μεγαλη διαφορα με το margin αν και οπτικα σου φαινεται το ιδιο. Θυμασαι πιο πανω το ποτηρι που το βαλαμε στο κουτι; Αν δεν δηλωσεις top, bottom, left, right, ολα θα ειναι με τιμη auto. Που λογικα θα πανε top/left μερια, παντοτε μεσα στο κουτι. Τωρα, αν πεις στο... ποτηρι top:20px; θα κουνηθει παλι 20px απο πανω. Αν ομως δε εχεις στο κουτι position:relative και εχει το τραπεζι postition:relative; τοτε το ποτηρι θα γινει positioned 20px απο το επανω μερος του τραπεζιου. (αν δε πατησες ctrl+w μεχρι τωρα εισαι ηρωας).

 

Κατι τελευταιο που πρεπει να εχεις στο νου σου:

 

Υπαρχει και το μαγικο transform:translateXY() με το οποιο και παλι μπορεις να κουνησεις elements οποτε μπορεις να το κοιταξεις. Βεβαια δεν ενδυκνειται για responsive και μονιμη μετακινηση αλλα κυριως χρησιμοποιειται για animations μιας και η συγκεκριμενη παραμετρος γινεται rendered απο την καρτα γραφικων και οχι απο τον επεξεργαστη. Αν λοιπον αργοτερα θελησεις με ενα ::hover να κανεις animations στο ποτηρι, μην το κανεις με margin γιατι θα glitchαρει (ισως οχι στο pc αλλα σε κινητες συσκευες ναι) μιας και το render γινεται απο τον επεξεργαστη. Οποτε για animation movements -> transform:translateXY();

[ss13]

Δες κι εδώ παραδείγματα , μπορεί να σε βοηθήσουν

 

https://www.w3schools.com/cssref/pr_margin-top.asp

https://www.w3schools.com/css/css_positioning.asp

[alexiosd]

άρα το mergin αφήνει κενά γύρο από τα elements με αποτέλεσμα να αλλάζουν θέση. ενώ το top bottom κλπ δουλεύουν πάντα με ένα position εκτος του static και μετακινούν τα elements στο συγκεκριμένο box στο οποιο έχουμε δηλώσει το position του. κάπως έτσι πάει?

[dominotrix]

Ναι το χεις πιασει το νοημα

 

Δες αυτο:  https://i.stack.imgur.com/PeSIJ.gif

[alexiosd]

επίσης το position absolute για να δουλέψει πρέπει το parent κουτί του να έχει position relative. πχ ένα element <p> με position absolute το οποιο είναι μέσα στο κουτί το οποιο έχει position relative(parent κουτί) μπορεί να μετακινηθεί στο parent κουτί χρησιμοποιώντας τις ιδιότητες top bottom κλπ.. σωστά?

[Ruhl]

http://learnlayout.com/

Εχει παρα πολλα ονλινε αλλα σκοπος σου ειναι να μαθεις να τα προσαρμοζεις , και το παραπανω το θεωρο αρκετα κατανοητο.

Απο εδω το βρηκα εχει και αλλα καλα μεσα διαβασε το 
https://medium.freecodecamp.org/my-journey-to-becoming-a-web-developer-from-scratch-without-a-cs-degree-2-years-later-and-what-i-4a7fd2ff5503

 

[alexiosd]

φαίνεται πολύ χρήσιμο το link, ευχαριστώ