Superimposing things is extremely easy once you’ve understood the absolute position rule.
An element is either: not positioned (by default, position:auto)
or positioned (either relative, absolute or fixed – there’s also static and inherit).
Good to know: adding position:relative to an element doesn’t change anything visually as long as you don’t add placement values.
So in oder to make element overlap others, you need to give them a position:absolute property, along with placement values. Those things:
The only thing needed now is a reference for those coordinates. So here is the rule:
An absolute positioned element is positioned regarding its closest positioned parent.
So if you have a div with position:relative, and an image inside with position:absolute, the coordinates will reference the top left corner of the div, by default (unless you change that by clicking on one of these:
)
But if the div isn’t positioned, the absolute element will look up in the hierarchy until it finds a positioned parent… up to the body element.
So in your case, make a div, give it position:relative, drag your images inside, give them position:absolute and click on this
for both, give the lower image a z-index of 1 and the one on top a z-index of 2 (so it’s on top)
If you can’t see the z-index thing, click again on the position property even if it’s already clicked:
