My friend and manager Jake Fentress came up with this solution which I applied to a recent client project since we needed to support IE11. This method does require the ole “take the the dang element out of the document flow” tactic and we’ll be doing it with floats! So in the case that you have to support IE. If you want to learn more about CSS grid I encourage you to familiarize yourself with the fantastic articles and videos from Rachel Andrews and Jen Simmons. You name it, the web is your oyster! Wee!
#DOODLE FIT DIAGONAL OVERLAP SOLUTION CODE#
Overlapping-images-css-grid-example by Bri Camp ( CodePen.Įt voila! With CSS grid and very little code you can start overlapping all the things that includes text over images, text over text (oh my!), images over canvas. Grid-row: 1 // make this image be on the same row
#DOODLE FIT DIAGONAL OVERLAP SOLUTION HOW TO#
Method 1: CSS Gridīefore I start hearing grumbles about needing to support IE and how you can’t use CSS Grid, I say you can use CSS Grid and easily use a fall back for IE which I’ll show you how to do in the last section of this post. 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 kommentar(er)
