I will write out two solid approaches to overlapping images without having content overlap our wonderful image component I’ll affectionately call the “image stack”. The good news: there is a much better way and do not attempt that first route unless you enjoy pain. Image-stack-bad-example by Bri Camp ( CodePen. It’s a dark place, I don’t recommend it.Īn example of what I’m talking about is here: The next thing you know, you’re found days later with no food or water drinking the last of your uncontrollable tears. To get around this, you might begin to try out arbitrary heights on the images and the component then becomes very fragile, limited, and hacky real fast. This is due to the height of the absolute-positioned image which is not recognized since it’s out of the document flow, (a normal behavior for an absolute positioned element). If the absolute-positioned element is taller than the static (top) image, the following content will overlap the images. Wellllll, once you need text or any other content after the images, you’ll run into a problem. One way you might approach it is you could absolutely position one element with a lower z-index to make the other image sit on top, adjust the widths on each image, so you can see both of them and call it day, right? When the design is handed to you, as the developer to implement it, there are a few ways to go about it like most things with CSS. Something very popular in web design currently is overlapping images. ![]()
0 Comments
Leave a Reply. |
AuthorStephanie ArchivesCategories |