CSS - τοποθέτηση μπλοκ. Απόλυτη και σχετική τοποθέτηση

Παιδικά είδη 26.07.2019

Επισκόπηση προγράμματος Η έκδοση υπολογιστή του Microsoft Excel Viewer θα επιτρέψει...

Chercher Παιδικά είδηκαι ιδιότητες μετατόπισης. Η μετατόπιση σε αυτή την περίπτωση δεν θα συμβεί σε σχέση με το «γονικό» στοιχείο (όπως με την απόλυτη τοποθέτηση), αλλά σε σχέση με το ίδιο το μπλοκ στην κανονική ροή. Αυτό θα γίνει πιο ξεκάθαρο με ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια σελίδα HTML με τρία div:

Σχετική τοποθέτηση

Ας ορίσουμε τα μεγέθη και τα όρια αυτών των μπλοκ στο φύλλο στυλ:

#blok1, #blok2, #blok3 ( περίγραμμα: 1px συμπαγές κόκκινο; πλάτος:150px; ύψος:50px; )

Τώρα η σελίδα μας στο πρόγραμμα περιήγησης μοιάζει με αυτό:

Τώρα ας αλλάξουμε τη θέση του δεύτερου μπλοκ προσθέτοντας έναν κανόνα στη σελίδα στυλ:

#blok1, #blok2, #blok3 ( περίγραμμα:1px συμπαγές κόκκινο; πλάτος:150px; ύψος:50px; ) #blok2(θέση:σχετικά; αριστερά:50px; επάνω:25px; )

Τώρα η σελίδα μας μοιάζει με αυτό:

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

Πλωτές πλάκες

Αυτά τα μπλοκ δεν μπορούν να τοποθετηθούν με ακρίβεια pixel, όπως σε προηγούμενα σχήματα, αλλά αυτό το σχήμα τοποθέτησης είναι πολύ κοινό. Σπάνια επιβιώνει ένας ιστότοπος χωρίς αιωρούμενα μπλοκ και είναι εντελώς αδύνατο να δημιουργήσετε μια «ρευστή» διάταξη ιστότοπου χωρίς αυτά.

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

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

αριστερά- το μπλοκ πιέζεται στην αριστερή άκρη, τα υπόλοιπα στοιχεία ρέουν γύρω του στη δεξιά πλευρά.

σωστά- το μπλοκ πιέζεται στη δεξιά άκρη, τα υπόλοιπα στοιχεία ρέουν γύρω του στην αριστερή πλευρά.

κανένας- το μπλοκ δεν μετακινείται και τοποθετείται σύμφωνα με την ιδιότητα θέση.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια σελίδα HTML με τον ακόλουθο κώδικα:

Τοποθέτηση μπλοκ

Κείμενο μπλοκ 1

Και μια σελίδα style.css με τον ακόλουθο κώδικα:

#blok1( περίγραμμα: 1px συμπαγές κόκκινο; πλάτος:150px; ύψος:50px; )

Τώρα η σελίδα μας στο πρόγραμμα περιήγησης μοιάζει με αυτό:

Ας κάνουμε το μπλοκ μας να επιπλέει και ας το σπρώξουμε στην αριστερή άκρη:

#blok1( περίγραμμα: 1px συμπαγές κόκκινο; πλάτος:150px; ύψος:50px; float:αριστερά; )

Τώρα ας σπρώξουμε το μπλοκ στη δεξιά άκρη:

#blok1( περίγραμμα: 1px συμπαγές κόκκινο; πλάτος:150px; ύψος:50px; float:δεξιά; )

Τώρα η σελίδα μας στο πρόγραμμα περιήγησης μοιάζει με αυτό:

Τι συμβαίνει εάν υπάρχουν πολλά αιωρούμενα μπλοκ στη σελίδα; Ας προσθέσουμε άλλο ένα μπλοκ στη σελίδα μας html:

Τοποθέτηση μπλοκ

Κείμενο μπλοκ 1

Κείμενο αποκλεισμού 2

Μόνο μερικά στοιχεία στη σελίδα. Μπορεί να είναι απλώς κείμενο, σύνδεσμοι, λίστες, εικόνες κ.λπ.

Και δώστε τους διαφορετικές αξίες ακινήτων φλοτέρ:

#blok1( περίγραμμα:1px συμπαγές κόκκινο; πλάτος:150px; ύψος:50px; float:αριστερά; ) #blok2( περίγραμμα:1px σταθερό κόκκινο; πλάτος:150px; ύψος:50px; float:δεξιά; )

Τώρα η σελίδα μας στο πρόγραμμα περιήγησης μοιάζει με αυτό:

Τι γίνεται αν έχουν τις ίδιες τιμές; Για παράδειγμα:

#blok1( περίγραμμα: 1 εικονοστοιχεία συμπαγές κόκκινο; πλάτος: 150 εικονοστοιχεία; ύψος: 50 εικονοστοιχεία; float: αριστερά; ) #blok2( περίγραμμα: 1 εικονοστοιχεία συμπαγές κόκκινο; πλάτος: 150 εικονοστοιχεία; ύψος: 50 εικονοστοιχεία; float: αριστερά; )

Στη συνέχεια, το δεύτερο μπλοκ θα πιέσει στη δεξιά άκρη του πρώτου μπλοκ:

Η κατάσταση θα είναι παρόμοια για τις ίδιες τιμές σωστά:

#blok1( περίγραμμα: 1 εικονοστοιχεία συμπαγές κόκκινο; πλάτος: 150 εικονοστοιχεία; ύψος: 50 εικονοστοιχεία; float:δεξιά; ) #blok2( περίγραμμα: 1 εικονοστοιχεία συμπαγές κόκκινο; πλάτος: 150 εικονοστοιχεία; ύψος: 50 εικονοστοιχεία; float:δεξιά; )

Σημειώστε: πρώτα το μπλοκ 1 θα πιεστεί στη δεξιά άκρη και, στη συνέχεια, το μπλοκ 2 θα πιεστεί σε αυτό.

Τι γίνεται όμως αν θέλουμε τα μπλοκ να πιέζονται στη δεξιά άκρη, αλλά να βρίσκονται το ένα κάτω από το άλλο. Υπάρχει μια ιδιοκτησία για αυτό Σαφή, το οποίο καθορίζει ποιες πλευρές ενός αιωρούμενου μπλοκ δεν μπορούν να είναι δίπλα σε άλλα αιωρούμενα μπλοκ. Αυτή η ιδιότητα μπορεί να έχει μία από τέσσερις τιμές:

αριστερά- το μπλοκ πρέπει να βρίσκεται κάτω από όλα τα μπλοκ αριστερής όψης.

σωστά- το μπλοκ πρέπει να βρίσκεται κάτω από όλα τα μπλοκ δεξιάς όψης.

και τα δυο- το μπλοκ πρέπει να βρίσκεται κάτω από όλα τα αιωρούμενα μπλοκ.

κανένας- δεν υπάρχουν περιορισμοί, αυτή είναι η προεπιλεγμένη τιμή.

Ας ορίσουμε αυτήν την ιδιότητα για το δεύτερο μπλοκ στο τελευταίο μας παράδειγμα:

#blok1( περίγραμμα:1px συμπαγές κόκκινο; πλάτος:150px; ύψος:50px; float:δεξιά; ) #blok2( περίγραμμα:1px σταθερό κόκκινο; πλάτος:150px; ύψος:50px; float:δεξιά; καθαρό:δεξιά; )

Τώρα έγινε όπως ήθελα: το ένα τετράγωνο κάτω από το άλλο:

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

Ας δούμε πώς μπορεί να γίνει χρησιμοποιώντας αιωρούμενα μπλοκ. Έτσι, ο κώδικας για την ίδια τη σελίδα είναι ο εξής:

Τοποθέτηση μπλοκ

κεφαλίδα ιστότοπου

Περιεχόμενο

μπλοκ ειδήσεων

κάτω μέρος του ιστότοπου

Στη σελίδα style.css, ας ορίσουμε πρώτα τις διαστάσεις και το φόντο για τα μπλοκ μας:

#header( φόντο:σκούρο; πλάτος:715px; ύψος:100px; ) #menu( background:oldlace; πλάτος:190px; ύψος:300px; ) #content( background:oldlace; πλάτος:525px; ύψος:300px; ) #footer ( φόντο: σκούρο; πλάτος: 715 εικονοστοιχεία; ύψος: 30 εικονοστοιχεία; ) #news( φόντο: κίτρινο; πλάτος: 150 εικονοστοιχεία; ύψος: 280 εικονοστοιχεία; )

Τώρα τα μπλοκ μας βρίσκονται σε κανονική ροή, δηλ. το ένα κάτω από το άλλο. Πρέπει να φτιάξουμε μπλοκ μενούΚαι περιεχόμενοαιωρούμενος και αριστερόχειρας. Ένα μπλοκ Νέαπρέπει να πιέζει τη δεξιά άκρη, δηλ. Θα το κάνουμε ένα δεξιόστροφο αιωρούμενο μπλοκ:

#header( φόντο: σκούρο; πλάτος: 715 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; ) #μενού( φόντο: oldlace; πλάτος: 190 εικονοστοιχεία; ύψος: 300 εικονοστοιχεία; float: αριστερά; ) #content( φόντο: oldlace; πλάτος: 525 εικονοστοιχεία; ύψος: 300 εικονοστοιχεία ; float:αριστερά;

Η σελίδα μας στο πρόγραμμα περιήγησης μοιάζει με αυτό:

Ας δούμε το μπλοκ ειδήσεων μας, μπορείτε να δείτε ότι βρίσκεται κάτω από το κείμενο στο μπλοκ περιεχόμενο. Αλλά θέλαμε το μπλοκ ειδήσεων να είναι στα δεξιά και το κείμενο να ρέει γύρω του στα αριστερά.

Γιατί δεν μας βγήκε; Γιατί το μπλοκ μας Νέαστον κώδικα html βρίσκεται κάτω από το κείμενο και μόνο το κείμενο που βρίσκεται κάτω από αυτό θα ρέει γύρω του. Για να διορθωθεί αυτό πρέπει να τοποθετήσουμε το δικό μας div = "ειδήσεις"πάνω από το κείμενο (δηλαδή πριν από τη λέξη "περιεχόμενο"):

Τοποθέτηση μπλοκ

κεφαλίδα ιστότοπου

μπλοκ ειδήσεων

Περιεχόμενο

κάτω μέρος του ιστότοπου

Τώρα το μπλοκ ειδήσεων είναι στη θέση του:

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

#news( φόντο: κίτρινο; πλάτος: 150 εικονοστοιχεία; ύψος: 280 εικονοστοιχεία; float: δεξιά; περιθώριο: 10 εικονοστοιχεία; )

Τώρα έχουμε πετύχει το ίδιο αποτέλεσμα με την απόλυτη τοποθέτηση.

Συμφωνήστε ότι η χρήση αιωρούμενων μπλοκ είναι πιο εύκολη στη διάταξη μιας σελίδας: δεν χρειάζεται να μετράτε pixel και ο κώδικας είναι μικρότερος. Επιπλέον, με μια "ρευστή" διάταξη, δεν μπορούμε να καθορίσουμε την ακριβή θέση του μπλοκ στην οθόνη και με τη βοήθεια αιωρούμενων μπλοκ δεν το χρειαζόμαστε, αρκεί να υποδείξουμε μόνο ένα ορόσημο (στα αριστερά, δεξιά, κάτω ή στην ίδια γραμμή).

Σταθερά μπλοκ

Όπως θυμάστε, με σταθερή τοποθέτηση, το μπλοκ στερεώνεται σε σχέση με την περιοχή προβολής. Κατά κάποιο τρόπο, τα σταθερά μπλοκ είναι παρόμοια με τα πλαίσια. Η κύλιση είναι διαθέσιμη μόνο μέσα σε ένα πλαίσιο, αλλά όχι μέσα σε ένα μπλοκ.

Τα διορθωμένα μπλοκ έχουν ένα σημαντικό μειονέκτημα: δεν υποστηρίζονται από προγράμματα περιήγησης Internet Explorer. Επομένως, δεν πρέπει να χρησιμοποιούνται προς το παρόν. Επομένως, εδώ θα υποδείξουμε μόνο τη σύνταξη ενός τέτοιου κανόνα, εάν θέλετε να το δοκιμάσετε μόνοι σας (για παράδειγμα, στο πρόγραμμα περιήγησης Opera).

#blok( position:fixed; left:0px; top:0px; )

Το μπλοκ με το αναγνωριστικό "blok" θα παραμείνει στη θέση του κατά την κύλιση της σελίδας.

Αυτά για σήμερα. Στο επόμενο μάθημα θα εξοικειωθούμε με μερικές ακόμη ιδιότητες των μπλοκ και τους τύπους τους.

Αυτές τις μέρες, οι προγραμματιστές ιστού μπορούν να δημιουργήσουν περίπλοκες διατάξεις ιστοσελίδων χρησιμοποιώντας διάφορες τεχνικές CSS. Μερικές από αυτές τις τεχνικές έχουν μακρά ιστορία (floats), άλλες (flexbox) έχουν κερδίσει δημοτικότητα τα τελευταία χρόνια.

Σε αυτό το άρθρο, θα ρίξουμε μια πιο προσεκτική ματιά σε μερικά ελάχιστα γνωστά πράγματα σχετικά με την τοποθέτηση CSS.

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

Επισκόπηση των διαθέσιμων μεθόδων εντοπισμού θέσης

Η ιδιότητα θέσης CSS καθορίζει τον τύπο τοποθέτησης ενός στοιχείου.

Επιλογές τοποθέτησης

static είναι η προεπιλεγμένη τιμή ιδιότητας τοποθέτησης. Σας συμβουλεύουμε ότι αυτό το στοιχείο δεν χρησιμοποιεί τοποθέτηση - η τοποθέτηση εφαρμόζεται μόνο εάν καθορίσετε έναν τύπο τοποθέτησης διαφορετικό από τον προεπιλεγμένο.

Για να το κάνετε αυτό, πρέπει να ορίσετε την ιδιότητα θέση σε μία από τις ακόλουθες τιμές:

συγγενής
απόλυτος
σταθερός
κολλώδης

Και μόνο αφού ρυθμίσετε την τοποθέτηση, μπορείτε να χρησιμοποιήσετε ιδιότητες που αντισταθμίζουν το στοιχείο:

σωστά
κάτω μέρος
Η αρχική τιμή αυτών των ιδιοτήτων είναι η αυτόματη λέξη-κλειδί.

Θα πρέπει να ληφθεί υπόψη ότι εάν ένα στοιχείο έχει την ιδιότητα θέσης του σε απόλυτη ή σταθερή, τότε είναι στοιχείο απολύτως τοποθετημένο. Επίσης, η ιδιότητα z-index αρχίζει να λειτουργεί για τα τοποθετημένα στοιχεία, η οποία καθορίζει τη σειρά στοίβαξης.

Διαφορές μεταξύ των κύριων μεθόδων τοποθέτησης

Τώρα ας δούμε γρήγορα τρεις βασικές διαφορές μεταξύ των διαθέσιμων τύπων τοποθέτησης:

Τα απολύτως (απόλυτα) τοποθετημένα στοιχεία απομακρύνονται εντελώς από το ρεύμα, τη θέση τους παίρνουν οι πλησιέστεροι γείτονές τους.
σχετικά τοποθετημένα (σχετικά) και κολλημένα (κολλώδη) διατηρούν τη θέση τους στη ροή και οι πλησιέστεροι γείτονές τους δεν την καταλαμβάνουν. Ωστόσο, η επένδυση αυτών των στοιχείων δεν καταλαμβάνει χώρο, αλλά αγνοείται εντελώς από άλλα στοιχεία και αυτό μπορεί να οδηγήσει σε επικάλυψη στοιχείων.
Τα σταθερά στοιχεία (και η σταθερή θέση είναι ένας τύπος απόλυτου) τοποθετούνται πάντα σε σχέση με την περιοχή ορατότητας (αγνοώντας την παρουσία τοποθέτησης στους προγόνους), ενώ τα κολλώδη στοιχεία τοποθετούνται σε σχέση με τον πλησιέστερο πρόγονο με κύλιση (υπερχείλιση: αυτόματη). Και μόνο απουσία τέτοιων προγόνων τοποθετούνται σε σχέση με τη ζώνη ορατότητας.

Μπορείτε να το δείτε πιο αναλυτικά στο demo:

Σημείωση: Η τοποθέτηση κολλώδους στοιχείου εξακολουθεί να είναι μια πειραματική τεχνολογία με περιορισμένη υποστήριξη σε προγράμματα περιήγησης. Φυσικά, εάν το επιθυμείτε, μπορείτε να χρησιμοποιήσετε ένα πολυγέμισμα για να προσθέσετε αυτήν τη λειτουργία στο πρόγραμμα περιήγησης, αλλά δεδομένου του χαμηλού επιπολασμού της, αυτή η ιδιότητα δεν θα συζητηθεί στο άρθρο.

Στοιχεία τοποθέτησης με απόλυτο τύπο τοποθέτησης

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

Ως εκ τούτου, αποφάσισα να ξεκινήσω με αυτό όταν περιγράφω ελάχιστα γνωστά χαρακτηριστικά της τοποθέτησης.

Έτσι, ένα απολύτως τοποθετημένο στοιχείο μετατοπίζεται σε σχέση με τον πλησιέστερο τοποθετημένο πρόγονό του. Φυσικά, αυτό λειτουργεί εάν οποιοσδήποτε από τους προγόνους έχει θέση διαφορετική από τη στατική - εάν το στοιχείο δεν έχει τοποθετημένους προγόνους, μετατοπίζεται σε σχέση με την περιοχή ορατότητας.

Αυτό αποδεικνύεται από το ακόλουθο παράδειγμα:

Σε αυτήν την επίδειξη, το πράσινο μπλοκ είναι αρχικά τοποθετημένο απολύτως με μηδενικό padding bottom:0 και αριστερά:0, ο πρόγονός του (το κόκκινο μπλοκ) δεν ήταν καθόλου τοποθετημένος.

Ωστόσο, έχουμε τοποθετήσει σχετικά το εξωτερικό περιτύλιγμα (στοιχείο με κατηγορία jumbotron). Παρατηρήστε πώς αλλάζει η τοποθέτηση του πράσινου μπλοκ όταν αλλάζει ο τύπος τοποθέτησης των προγόνων του.

Τα απολύτως τοποθετημένα στοιχεία αγνοούν την ιδιότητα float

Εάν εφαρμόσουμε απόλυτη ή σταθερή τοποθέτηση σε ένα αιωρούμενο στοιχείο, η ιδιότητα float θα οριστεί σε none . Από την άλλη, αν θέσουμε σχετική τοποθέτηση, το στοιχείο θα παραμείνει αιωρούμενο.

Ρίξτε μια ματιά στο αντίστοιχο demo:

Σε αυτό το παράδειγμα, ορίζουμε δύο διαφορετικά στοιχεία που επιπλέουν προς τα δεξιά. Σημειώστε ότι όταν ένα κόκκινο μπλοκ γίνεται απόλυτα τοποθετημένο, αγνοεί την τιμή της ιδιότητας float, ενώ ένα σχετικά τοποθετημένο πράσινο μπλοκ διατηρεί την τιμή float.

Τα απολύτως τοποθετημένα ενσωματωμένα στοιχεία γίνονται στοιχεία μπλοκ

Ένα ενσωματωμένο στοιχείο με απόλυτη ή σταθερή θέση παίρνει τις ιδιότητες ενός στοιχείου μπλοκ. Η μετατροπή των ενσωματωμένων στοιχείων σε στοιχεία μπλοκ περιγράφεται με περισσότερες λεπτομέρειες στον πίνακα.

Σε αυτή την περίπτωση, δημιουργήσαμε δύο διαφορετικά στοιχεία. Το πρώτο (πράσινο μπλοκ) είναι στοιχείο μπλοκ και το δεύτερο (κόκκινο μπλοκ) είναι ενσωματωμένο στοιχείο. Αρχικά, φαίνεται μόνο το πράσινο μπλοκ.

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

Όταν εκχωρείτε μια απόλυτη ή σταθερή θέση σε ένα κόκκινο μπλοκ, αυτό γίνεται μπλοκ και τα μεγέθη μπλοκ που καθορίζονται σε αυτό τίθενται σε ισχύ.

Τα απολύτως τοποθετημένα στοιχεία δεν έχουν σύμπτυξη επένδυσης

Από προεπιλογή, όταν ακουμπούν δύο κατακόρυφα περιθώρια, συνδυάζονται σε ένα ίσο με το μέγιστο από αυτά. Αυτό ονομάζεται κατάρρευση περιθωρίου.

Η συμπεριφορά των απολύτως τοποθετημένων στοιχείων εδώ είναι παρόμοια με τα αιωρούμενα στοιχεία - η επένδυση τους δεν συνδυάζεται με τους γείτονές τους.

Σε αυτήν την επίδειξη, δίνεται στο στοιχείο ένα padding 20 pixel. Η συμπλήρωσή του καταρρέει με το padding του γονικού στοιχείου, το οποίο είναι επίσης 20 pixel. Όπως μπορείτε να δείτε, μόνο με απόλυτη τοποθέτηση δεν υπάρχει κατάρρευση.

Πώς μπορούμε όμως να αποτρέψουμε την κατάρρευση των περιθωρίων; Πρέπει να βάλουμε κάποιο είδος διαχωριστή μεταξύ τους.

Αυτό μπορεί να είναι padding ή περίγραμμα και μπορεί να εφαρμοστεί τόσο στο γονικό όσο και στο θυγατρικό στοιχείο. Μια άλλη επιλογή είναι να προσθέσετε μια επιδιόρθωση στο γονικό στοιχείο.

Τοποθέτηση στοιχείων με pixel και ποσοστά

Έχετε χρησιμοποιήσει ποτέ ποσοστά αντί για pixel για να τοποθετήσετε στοιχεία; Εάν η απάντηση είναι ναι, τότε γνωρίζετε ότι η μετατόπιση ενός στοιχείου εξαρτάται από τις επιλεγμένες μονάδες (pixel ή ποσοστά).

Είναι λίγο μπερδεμένο, έτσι δεν είναι; Ας δούμε λοιπόν πρώτα τι λέει η προδιαγραφή για την ποσοστιαία μετατόπιση:

Μετατόπιση ως ποσοστό του πλάτους (για αριστερά και δεξιά) ή ύψους (πάνω ή κάτω) του γονικού μπλοκ. Για τα κολλημένα στοιχεία, η μετατόπιση υπολογίζεται ως ποσοστό του πλάτους (για αριστερά και δεξιά) ή ύψους (πάνω ή κάτω) της ροής. Οι αρνητικές τιμές είναι αποδεκτές.

Όπως αναφέρθηκε, όταν ορίζετε τη μετατόπιση ως ποσοστό, η θέση του στοιχείου εξαρτάται από το πλάτος και το ύψος του γονέα του.

Το demo δείχνει αυτή τη διαφορά:

Αυτό το παράδειγμα χρησιμοποιεί pixel και ποσοστά για μετατόπιση. Φυσικά, όταν καθορίζετε μια μετατόπιση σε pixel, το στοιχείο μετακινείται όπου χρειάζεται.

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

Σημείωση: Όπως πιθανότατα γνωρίζετε, η ιδιότητα μετασχηματισμού (μαζί με τις διάφορες συναρτήσεις μετάφρασης) σας επιτρέπει επίσης να αλλάξετε τη θέση ενός στοιχείου. Αλλά σε αυτήν την περίπτωση, όταν χρησιμοποιείτε ποσοστά, ο υπολογισμός θα βασίζεται στο μέγεθος του ίδιου του στοιχείου και όχι στο μητρικό του στοιχείο.

συμπέρασμα

Ελπίζω ότι αυτό το άρθρο σας βοήθησε να κατανοήσετε καλύτερα την τοποθέτηση στο CSS και να ξεκαθαρίσει ορισμένες από τις προκλήσεις.

Όταν εργάζεστε με κείμενο, ο χρήστης μπορεί να χρειαστεί να ανταλλάξει προτάσεις ή ολόκληρες παραγράφους ή να τακτοποιήσει τμήματα με κάποιο μη τυπικό τρόπο. Υπάρχουν διάφοροι τρόποι για να μετακινήσετε ένα μπλοκ κειμένου στο Microsoft Office Word.

Οδηγίες

Επιλέξτε το μπλοκ κειμένου που θέλετε να μετακινήσετε. Αυτό μπορεί να γίνει χρησιμοποιώντας το αριστερό κουμπί του ποντικιού ή μια συντόμευση πληκτρολογίου. Ο συνδυασμός των πλήκτρων Shift και του δεξιού/αριστερού βέλους στο πληκτρολόγιο σάς επιτρέπει να επιλέξετε έναν εκτυπωμένο χαρακτήρα και τα βέλη πάνω/κάτω - μία γραμμή.

Το Ctrl, το Shift και το δεξί/αριστερό βέλος επισημαίνουν μια λέξη και αν χρησιμοποιείτε τα πάνω ή τα κάτω βέλη, μπορείτε να επιλέξετε μια ολόκληρη παράγραφο.

Αφού επιλεγεί το επιθυμητό κομμάτι, μετακινήστε τον κέρσορα σε αυτό και κάντε κλικ στο αριστερό κουμπί του ποντικιού. Ενώ το κρατάτε πατημένο, σύρετε ένα μπλοκ κειμένου στη θέση του εγγράφου που θέλετε. Αφήστε το κουμπί του ποντικιού.

Μια άλλη επιλογή: επιλέξτε το μπλοκ και κάντε δεξί κλικ στην επιλογή. Στο αναπτυσσόμενο μενού, επιλέξτε την εντολή "Cut" - το τμήμα κειμένου θα τοποθετηθεί στο πρόχειρο. Τοποθετήστε τον κέρσορα στο σημείο που θέλετε να μετακινήσετε το μπλοκ και κάντε δεξί κλικ ξανά. Από το μενού περιβάλλοντος, επιλέξτε την εντολή "Εισαγωγή".

Οι εντολές μπορούν επίσης να κληθούν από το πληκτρολόγιο. Ο συνδυασμός πλήκτρων Ctrl και X σάς επιτρέπει να αποκόψετε το επιθυμητό κομμάτι κειμένου και τα πλήκτρα Ctrl και V σας επιτρέπουν να το επικολλήσετε αλλού στο έγγραφο. Μπορείτε επίσης να χρησιμοποιήσετε τα κουμπιά στη γραμμή εργαλείων στην καρτέλα "Αρχική σελίδα".

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

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

Στην HTML, όλα τα στοιχεία μπορούν να χωριστούν σε block και inline. Τα στοιχεία μπλοκ συνήθως αναπαρίστανται ως ορθογώνιες περιοχές με κάποιο πλήθος πληροφοριών. Με τη βοήθειά τους δημιουργείται το πλέγμα σελίδων. Τέτοια στοιχεία καταλαμβάνουν όλο τον διαθέσιμο χώρο σε πλάτος και συνήθως υπάρχει ένα διάλειμμα γραμμής πριν και μετά από αυτά. Τα μπλοκ μπορούν να έχουν εσοχές, οριζόντιες και κάθετες διαστάσεις.