February 23rd, 2023

Steps to Overlaying One Image over Another (And a Log of How I Solve a Problem)

1. Start off with a div with two images in it. Both images are rendering, the "overlay" is under the base image as expected. Checkpoint.
2. Set CSS style on "overlay" image to position: absolute, top: 0, bottom: 0, observer "overlay" effect. Checkpoint.
3. Now pursue fitting image inside of box that takes 50% of document width.
   1. First try setting containing div CSS style to width: 50%.
   2. Notice overlay image is still taking 100% of parent's parent, but the "base" image is properly positioned. This is half of what we want.
   3. Try using position: relative on overlay image. Doesn't work.
   4. Research: "position absolute image does not use parent element box sizing".
      1. Click first link, most suggestions just suggest using pixel-wise adjustments, which we can't use.
      2. Notice some answers are suggesting parent container should use "relative" positioning. What is that about? Probably nothing, let's look into some other options.
      3. So far research seems to not be giving many great options...
   5. Try adding CSS style display: inline-block to overlay image. This does nothing.
   6. I noticed some of the other places where this worked, the parent container was a "flex" container. We can do this by setting the parent container's "display" property in its CSS to "flex" - so add this to the parent div CSS style: display: flex.
      • This has no noticeable effect.
   7. Ok, playing around has so far not given me any good results. Let's return to the research I had open. The fourth result was from a blog post on "solodev.com". It too mentions setting the parent div positioning to relative. Maybe there's something to this? It's a quick thing to try, so let's try it.... success! Just what we wanted.