Ein großes *Gleiches* an Michelle Barker hier
Hier ist etwas, das ich in CSS immer wieder brauche: das vollständige Abdecken eines Elements mit einem anderen. Es ist jedes Mal dieselbe CSS: Dem ersten Element (dem, das abgedeckt werden muss) wird
position: relativezugewiesen. Das zweite hatposition: absoluteund ist so positioniert, dass alle vier Seiten an den Kanten des ersten Elements ausgerichtet sind.
.original-element {
position: relative;
}
.covering-element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Ich habe irgendwie im Kopf, dass es „nicht so zuverlässig“ ist, bottom und right zu verwenden, und dass es sicherer ist, top und left zu setzen und dann width: 100% und height: 100% anzuwenden. Aber ich erinnere mich nicht mehr, warum – vielleicht war es etwas mit älteren Browsern?
Aber wenn wir schon von Modernisierung sprechen, ist mein Lieblingsteil aus Michelles Artikel dieser
.overlay {
position: absolute;
inset: 0;
}Die inset-Eigenschaft ist eine logische Eigenschaft und hier offensichtlich sehr praktisch! Lesen Sie den Artikel für einen weiteren Trick mit CSS Grid.
Lustig, Chris – ich habe dasselbe im Kopf bezüglich 100% Breite/Höhe, die „zuverlässiger“ ist. Vielleicht war das noch zu Zeiten von IE 6–8?
Wahrscheinlich! Die Ironie ist, dass man dadurch dann auf Padding oder Ränder achten muss, die eine Überdehnung verursachen, wenn man nicht
box-sizingsetzt. Außerdem macht man das vielleicht auf einem Pseudo-Element, was bedeutet, dass man auch daran denken musste,box-sizingfür Pseudo-Elemente zu setzen.right: 0; bottom: 0funktioniert nicht mit einigen Elementen, die eine inhärente Breite/Höhe haben, wie iframe oder Video. Vielleicht gilt das nur für IE 11, aber leider bedeutet das, dass es keine universell einsetzbare Utility-Klasse für diesen Anwendungsfall gibt.Und
width: 0; height: 0funktioniert nicht, wenn das übergeordnete Element ein Padding hat oder keine definierte Höhe.Ist es möglich, ein transparentes Bild über einer RGB-Zahl zu legen, um eine perlmuttartige Autofarbe zu erzeugen?
Übergeordneter Container
Stephanie Eckles zeigt uns
Der
inset-Trick scheint in Safari nicht zu funktionieren.Michelle geht in ihrem Beitrag auf die Browserunterstützung ein, aber ja, die Unterstützung für
insetist derzeit gering.