Αποτελεσματική Τοποθέτηση CSS

The element box set to absolute positioning is completely removed from the document flow and positioned relative to its containing block, which can be another element in the document or the initial containing block. The space occupied by the element in the normal document flow will close, as if the element did not originally exist. The element is positioned to generate a block-level box, regardless of what type of box it originally generated in the normal flow.

Αποτελεσματική Τοποθέτηση CSS

Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space. This is different from relative positioning, which is actually considered part of the normal flow positioning model, because the position of the element is relative to its position in the normal flow.

The layout of other elements in the normal flow is as if the absolutely positioned elements do not exist:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

όπως φαίνεται στον παρακάτω πίνακα:

CSS Αποτελεσματική Τοποθέτηση Παράδειγμα

Η τοποθέτηση του στοιχείου της αβέβαιης τοποθέτησης είναιΤον πλησιέστερο τοποθετημένο προγοντήΑν το στοιχείο δεν έχει προηγούμενο τοποθετημένο προγοντή, η τοποθέτησή του είναιΑρχικό Περιέκτημα.

Η κύρια ερώτηση για τη τοποθέτηση είναι να θυμάστε τη σημασία κάθε τοποθέτησης. Επομένως, ας αναθεωρήσουμε ό,τι έχουμε μάθει: η τοποθέτηση του απόλυτου είναι "για" το αρχικό περιέκτημα, ενώ η τοποθέτηση του σχετικού είναι "για" την αρχική τοποθέτηση του στοιχείου στο έγγραφο.

Σημείωση:Κατάλογος χρήστης: Η αρχική περιέκτημα μπορεί να είναι το χρώμα ή το στοιχείο HTML.

Σημείωση:Επειδή τα πλαίσια της αβέβαιης τοποθέτησης δεν σχετίζονται με τον ροή του έγγραφου, μπορούν να καλύπτουν άλλα στοιχεία της σελίδας. Μπορείτε να ρυθμίσετε Ατрибούτο z-indexΓια να ελέγξετε τη σειρά των θυρών.

CSS Αποτελεσματική Τοποθέτηση Παράδειγμα

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