Right here’s one thing I discover myself needing to do many times in CSS: fully overlaying one aspect with one other. It’s the identical CSS each time: the primary aspect (the one which must be coated) has place: relative utilized to it. The second has place: absolute and is positioned so that every one 4 sides align to the sides of the primary aspect. The total CSS appears like this:
.original-element {
place: relative;
}
.covering-element {
place: absolute;
high: 0;
proper: 0;
backside: 0;
left: 0;
}Usually it’s a heading or caption that should cowl a picture, generally with a translucent background color or gradient. (I’d seek advice from this as an overlay.) Normally it’s a direct baby of the primary aspect which is being overlaid, however not at all times. Generally I wish to overlay a pseudo aspect, possibly even transition or animate it for a hover state. Both approach, I do it so typically that it is smart to create a utility class that covers it, fairly than writing out the CSS properties longhand each time.
Utility lessons
Utility lessons are single-purpose lessons that may be utilized to any aspect in our net software code. They often (however not at all times) encompass a single CSS property and worth. There are entire frameworks, just like the increasingly-popular Tailwind CSS, that encourage a utility-first CSS methodology, the place nearly all of your CSS consists of making use of utility lessons. Even for many who don’t have any want to undertake such an excessive strategy, many net tasks embody a sprinkling of utility lessons to assist issues alongside.
As a utility class for our overlaid aspect would come with a number of properties, it’s extra verbose than most. However, it does the job.
We will create a utility we’ll name .overlay to cowl a component:
.overlay {
place: absolute;
content material: '';
high: 0;
proper: 0;
backside: 0;
left: 0;
}Whereas very versatile as a utility, utilizing place: absolute units the aspect’s place in relation to the closest relative-position ancestor, so we have to keep in mind to set place: relative on the aspect we wish to cowl (and guarantee it’s an ancestor of the overlaying aspect).
Usually the aspect I wish to use as an overlay is a direct baby, or a pseudo-element, so it would make sense to create additional utilities to use in these circumstances, which imply we don’t moreover must set place: relative. Any of those three lessons may as a substitute be utilized to the dad or mum – that’s, the unique aspect that we wish to cowl.
.overlay-child,
.overlay-before,
.overlay-after {
place: relative;
}
.overlay-child > *,
.overlay-before::earlier than,
.overlay-after::after {
place: absolute;
content material: '';
high: 0;
proper: 0;
backside: 0;
left: 0;
}For the pseudo-elements we’d like the additional property content material (on this case with a worth of an empty string).
We now have three utilities – overlay-child (to place a direct baby aspect), overlay-before (to place a ::earlier than pseudo-element) and overlay-after (to place a ::after pseudo-element), along with overlay, which might apply after we wish to goal the aspect doing the overlaying. An instance of if you may use overlay as a substitute of one of many parent-targeting lessons is that if the overlaying aspect just isn’t a direct baby however a descendent additional down the DOM tree.
See the Pen
Overlay utility lessons by Michelle Barker (@michellebarker)
on CodePen.
Tip: Getting the closest positioned dad or mum with JavaScript
Whereas we’re on the topic, after we’re coping with complicated elements and absolute positioning, a rogue place: relative can generally be a explanation for format bugs. To debug, we’ll typically wish to discover the closest relative-positioned ancestor to the absolute-positioned aspect that’s inflicting us points. Fortunately, we will do this simply with a tiny little bit of JavaScript!
In Firefox and Chrome’s dev instruments, typing $0 within the console panel will return the at the moment chosen aspect. If we sort $0.offsetParent, the closest positioned ancestor of the at the moment chosen aspect will probably be returned. We will then test whether or not it has place: relative within the kinds panel. (Or if we wish to test it in JavaScript, we will use
getComputedStyle($0.offsetParent).place.)
Logical properties
Positioning a component on this approach is about to turn out to be extra concise with the assistance of the brand new inset property. A part of the CSS Logical Properties specification, inset is successfully a shorthand for the place properties high, proper, backside, left. That’s not fairly the entire story – we even have the brand new logical properties, which permit us to attain the same factor: inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end. If we’re utilizing the default left-to-right writing mode this can map to high, backside, left, proper in that order, however different writing modes (in addition to the course property) will trigger the values to be mapped otherwise. Proper now although, we solely want the inset property for our coated aspect.
In case you’re not too accustomed to writing modes or logical properties, this could really feel just a little complicated at first. Right here’s an awesome explainer by Rachel Andrew from a few years again.
Again to our utility lessons, as a substitute of:
.overlay {
high: 0;
backside: 0;
proper: 0;
left: 0;
}We will condense these 4 traces down to at least one:
.overlay {
inset: 0;
}Changing them in our utility lessons makes our code significantly shorter:
.overlay-child,
.overlay-before,
.overlay-after {
place: relative;
}
.overlay-child > *,
.overlay-before::earlier than,
.overlay-after::after {
place: absolute;
content material: '';
inset: 0;
}Browser help
On the time of writing inset is just supported in Chrome and Firefox, so if you wish to use it in manufacturing you’ll want to offer a fallback for non-supporting browsers. Nevertheless it appears like browsers are getting behind logical properties on the entire, with lots of them implementing at the least a part of the Logical Properties specification – so I’d prefer to suppose we will anticipate to have the ability to use it fairly quickly!
An alternate with Grid
As Šime Vidas identified, one thing I uncared for to say is you may not want absolute positioning in any respect: we will additionally use CSS Grid to cowl one aspect with one other! Browser help isn’t pretty much as good, however should you don’t must help older browsers then it’s essentially the most concise answer, at solely two traces. The code appears like this:
.aspect {
show: grid;
}
.overlay {
grid-area: 1 / 1 / -1 / -1;
}If our overlay is the one baby aspect we don’t even must set the grid space, nevertheless it is perhaps a good suggestion to cowl our backs in case we find yourself including different baby parts – in any other case we may find yourself with some undesireable unintended effects when our gadgets are auto-placed on the grid.
.overlay-child,
.overlay-before,
.overlay-after {
show: grid;
}
.overlay,
.overlay-child > *,
.overlay-before::earlier than,
.overlay-after::after {
content material: '';
grid-area: 1 / 1 / -1 / -1;
}Right here’s a demo with the tailored utility:
See the Pen
Overlay utility lessons with Grid by Michelle Barker (@michellebarker)
on CodePen.
