Easily create overlapping sections on a website

[@KevinPowell]

Who here is surprised I didn't suggest Grid? 😆- Would also work great here, fwiw!

[@seandleary]

I have typically used negative margins for this situation, often because I'm 'pulling' an element up into the section above (or at least that's how I think of it). Then I have to match the padding on the upper section to match - something that is much easier with css variables now (e.g. var(--overlap)). I like the background image approach, but often I want the upper section to 'show through' behind the overalapped element, which doesn't work without some actual overlapping happening between the sections, even with 'transparent' as a color. Curious how you'd use grid for this...without it getting too messy.

[@mickdavies5647]

@seandleary recently, I've started using grid areas a lot more to define structure. Once the other elements are in place, it's as simple as row/col start and end (or span) to have them cross the multiple areas. I think Kevin did a video a while back explaining how to do it horizontally and it would work essentially the same in this case.

[@ivanangelkoski]

im suprised you didn't mention negative margin: margin-top: -100px

[@lambmaster]

Yes I'm surprised! I'd use grid if I need things centered, etc

[@j.almadhaji]

Lol

[@2mbst1]

I usually solve this with negative margins. Worked 15 years ago. Works today :D

[@corwins404]

It does, I still use it every now and then, but I think the gradient solution may be slightly better, depending on the situation. It works here because he's using solid colors, but I had overlapping background images, going to play with that, see if I still prefer margins over gradients

[@ahmedjaber-t4e]

or translateY

[@2mbst1]

@@ahmedjaber-t4e negative margin has the benefit that it "pulls" the flowing content after it up as well. Translate won't; leaving a "gap". Either one may be desireable depending on the situation though.

[@AdewaleLuqmaanMudasiru]

Still learning and that exactly what I thought.

[@vivianliu5011]

That actually is the first comes to my mind, negative margin... :)

[@christhompson4653]

I’d give the bottom section a solid bg, and put the gradient on the top section. That way you can control the overlap size more accurately without having to account for the height of the bottom

[@kjvdven]

That is what I do for these kind of things.

[@mickdavies5647]

Off the top of my head, I was sure you were going to give a grid solution as well as negative margin and possibly translate. I like both of your solutions though. I guess the beauty of css is that there are so many ways to achieve a given look, and which one is best often depends on the nuances of the specific case. Hope you have a great New Year!

[@alecio000]

If you need to pass an automated accessibility checker that looks for contrast errors (e.g. WAVE) for some reason, the checker probably isn't smart enough to figure out that the white text in the footer is on the dark part of the linear gradient, so you'll get a contrast error. You would fix that by keeping the background-color on .site-footer__bottom even though it makes no visual difference.

[@honkhonkv2236]

Make the footer relative, the footer-top absolute, works perfect on pc screen and break on other screen format, get mad, rethink life choices, do 50 media queries, imposter syndrome kicks in, 7 stages of grief, never touch the project again. 😂

[@KevinPowell]

I knew I forgot one of the options 😆

[@DavidBrown-bs7gg]

That's what I'd do

[@ScriptRaccoon]

This sounds too real

[@benrichuk]

Previously I've gone with the gradient solution but given the overlapping element its own full width wrapper. That wrapper has the gradient, which means I can use a % that's relative to the height of the element. It can also be independent from elements above/below it.

[@sudoalex]

As soon as I saw the title I thought of negative margin but I was curious what other creative solutions you would bring up. Thanks Kevin!

[@MattDunlapCO]

I like no-transition gradients for atypical background positions, but this feels like a case where positioning, translating, or a negative margin communicates more clearly the intent.

[@CodecrafterArtemis]

If I recall correctly, you don't need the lengths to be the same for a hard line gradient. CSS would produce it if the following length is less or equal to the preceding length. So you can do things like blue 300px, white 0.

[@mendoso]

Negative margin gives you possibility to use image or gradient in the footer bg. That's my option number 1. Another would be a box shadow, but it would be rather inset 0 -100px 0 0 var(--… than spread.

[@mutebg]

few months ago I implemented the css gradient version, in my case it was always 50% so much easier. Thanks for the great video again

[@mascatrails661]

I figured I'd probably try negative margins but I think your solutions are both much cleaner. Blew my mind with the gradient control

[@nut315]

I find I use negative margins for this more often than not. Usually because I'm getting 2 page builder blocks to overlap eachother (that could be used separately). The negative marin approach also works well with background images. Just throw a CSS variable into some padding and margin 👌 Something else to consider is if the overlap should equal half of the top section's height (with dynamic content). In this case you'd want the approach to be relative to the top section so you can accurately calculate 50% of its height. I'd probably use a pseudo element on the top element that's 50% + the padding gap, or use the background image approach but on the top element instead of the whole section.

[@EricFressange]

Hi Kevin and happy new year. For me a simpler solution to control the height of the overlap is to use the before pseudo element and place it in absolute position, z-index -1, inset: auto 0 100% and set the height you want. A grid approach is possible but much more complicated for this design except if you want to have a background image or a specific gradient.

[@KelbornXx]

Great solutions! That line-height on the heading though!

[@KevinPowell]

haha, sorry about that 😆

[@nexTabDE]

I use linear-gradients and have been using that solution for a while with much success. 🙂

[@Tony.Nguyen137]

I worked on a similar layout in one of Frontend Mentor’s premium projects and used a grid-based approach. However, I really prefer your solution-it’s much more elegant!

[@NiazyEladawy-t2i]

i used to do it with before and after your solution is much better

[@tuami]

I always use negative margins for this type of Layout. But i like the other approaches. But what about when the box is has no fixed hight. Sure u could use some calc and custom properties, but when keep it simple just use a negative margin.

[@tsudizera]

9:50 in the gradient solution, you may use `0` as start position for the second color, white. This will create the same sharp color transition with simpler code.

[@Lazy.perfectionist.]

I've used :after element with blue background and position absolute. With this aproach I can control height, and make is exactly 50% of pre footer block in all scren sizes and no matter what content can be inside footer or prefooter.

[@germanfrelo]

I've noticed that this is a common pattern that designers use, so it comes in very handy. Thanks as always, Kevin. 😊

[@thatgamingbrit]

another great video. I'd of probably used negative margins or positioning for implementation simplicity and speed (its been around forever), but I think i prefer your background-image solution more after seeing this video. I'd love to start seeing performance impact between different solutions in your videos. I know using positioning would create additional render layers and break stacking but what performance impact does background-image with a linear gradient have?

[@corykey9187]

You can use an absolutely positioned pseudo-element on the parent, set to 75% height, bottom, left, and right with a background color and `z-index: 0`. Just give the children higher z-indexes. Old-school but works great!

[@pascalmaranus]

Or put the pseudo element on the bottom part and make it height: calc(100% + var(--overlap-size)); Just to make Kevin's variable name work as one would expect 😆

[@PicSta]

I would go with 2nd version, but I see so many different ways here. Using negative margin-top, CSS grid and maybe position absolute for the hovering element and using viewport units for alignment.

[@Musiken]

First thoughts before watching: linear gradient background transparent & blue or absolute pseudo element or negative margin-bottom. Post watching: hah, didn’t see the box shadow coming.

[@suyogyaluitel8974]

Neat, the diagonal using to top right is also very useful.

[@TeianDown]

That's a design pattern I tend to run into quite a lot. I've noticed that diagonal gradients can sometimes have some pretty ugly aliasing though, so I like to do something like red 50%, white calc(50% + 2px) to smooth it out a bit.

[@SamueldaSilva-pl1ye]

Hi! I have a challenge for you. It would be amazing if you could make a video about this. A fixed informational banner at the top of a website. This banner has the ability to display more than one message at a time in a continuous loop. And now, here's the real challenge: if any of the messages exceed the screen size, for example on mobile, implement horizontal scrolling to show only the overflow of the missing message. If you could make a video about this, it would be fantastic! I've never seen a tutorial about something this complex. Love your work!

[@DocGenius42]

(If I understand your setup correctly:) For the linear-gradient method I'd rather give __bottom the bg-color and __top the gradient to ensure the bottom section is always colored. This way you would only control the size of the "overlap" and __top wouldn't need positioning with a z-idex. If you want to ensure the bg-color of __bottom and the bottom color of the gradient stay the same, give the footer a custom property with it.

[@knowsar]

Before watching this video the only thing i thought of was overlap negative margins 😅, thanks for both solutions 🙏

[@AkintolaJephthah-fn8mw]

Good evening my great CSS teacher. I really appreciate your efforts and I really appreciate it. There is a recent CSS property that I stumbled across but I've been doing my research on it and I can't seem to understand it much. The name of the CSS property is "will-change: ; " Note: is without a quote I just did that for sentence highlighting. Please sir I will be so glad if you can create a video to explain it much more better sir. Thank you so much. Jephthah from Nigeria

[@frontend-css-simplified]

Awesome stuff man. Previously I'm used both solutions. Also we could use a CSS pseudo element like ::before, ::after

[@BlameItOnGreg]

Negative margins definitely feels like the better option to me for this. With negative margins, actual background images would still work as expected.

[@pascarro]

As always, one solution might not always work in every contexts so it's good to have more than one solution. I think negative margin makes it easier when box content length might change or in a responsive context

[@thesedaysart437]

Adding a pseudo element also always works very well.

[@superbland86]

Negative margins were my first thought. I find it fascinating nonetheless to see how people conceive different solutions to the same problem that are equally valid. My mental model is more structural, whereas this feels more visual.

[@nwfashionmedia]

My first thought was relative positioning with a negative top value for the "top" item. Second thought was translate. I don't think I would have thought of a box-shadow or background-image.

[@IAmAdamTaylor]

I expected a final variation of the gradient method. If you place the gradient on the top div and a solid background color on the bottom div, you get the best of both worlds. The overlap variable will never be too small because it only relates to its own section - you can also set values like 50% and have it perfectly sit at the half way point no matter what content is added. To keep it DRY add a -clr-site-footer variable to the top level footer and use that for both sections.

[@gracesnowdesign7777]

It'd be nice if you did a follow up video with more approaches AND covered which one(s) to use if that overlapping section has a background image inside. In that case some methods, like those shown here, wouldn't be suitable.

[@colleenwieder]

Like the gradient option.

[@DraganEror]

I like the idea with the gradient, but I would use the power of background-position and background-size instead of reversing the gradient direction and setting the stops. For me just looks more simple. Something like this: .site-footer { background-image: linear-gradient(#ccc, #ccc); background-size: auto 200px; background-repeat: no-repeat; background-position: left bottom; }

[@melihb28]

you can apply a clip-path so the box shadow does not extend to the bottom

[@OlympieCorinna]

Great content, as always! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). What's the best way to send them to Binance?

[@GammaWraith]

position relative + transform translateY. Then add extra padding to top section

[@strahinjadjukic22]

You can use before after pseudo elements. :)

[@rafa6536]

Nice to see you again after one year break. As always, nice video, thanks! What I noticed you got divorced with Consolas :P and you now have those nice hints as you write :) need to find out what is it I want something like this :) Regards

[@RC-Flight]

Hi there thanks for the video! Where is the demo link?

[@waffle_judge7464]

I thought you would have used a before pseudo-element and made it the same color and adjusted it's size to whatever you wanted for the overlap. You'd probably have to use the z-index to get the sections to overlap though. Is that too complicated or are their some issues that would occur later on with making it responsive?

[@djanthony6662]

I will activate my cheap mode as a backend developer and go for relative and absolute LMAO. Love your content!

[@gE0013]

I would prefer solution 2 (very elegant), BUT it's not very responsive-friendly because if you set offsets in pixel you never know if they are correct. Is there a way to build this layout by setting in relation the two blocks? In other words, I want these two blocks to overlap by N pixels, no matter how tall they are.

[@LeniYourMaster]

Could also try ::before with 100% width, background color and an adequate top value. This might be an overkill, but something to consider in similar situations.

[@trixter21992251]

i liked the gradient solution more. Never thought about gradients with hard lines, that seems generally useful.

[@MaybeWinstonMain]

With solution 1. Can't you reduce the spread by half and then move the box shadow up with the -x px, like you showed before, so it doesn't spread down?

[@nikyt36]

Second solution is great.👍

[@mixxey]

I used negative margins until now, but I love the gradient solution 😄

[@Kinra_Jade]

I have a question: is there a merit to build a website around layers (z-index) overlapping each others rather than the classical way of doing things ? Basically, an approach like a sidescroller video game.

[@aurobindobhuyan2107]

Even at looking at the thumbnail i was thinking of position relative and absolute 😂😂😂

[@avneet12284]

Amazing solution

[@Drivingralle]

I like the idea of the gradient way. Just wondering what about responsive behavior

[@davidhendy410]

Pseudo :after element and styling that up could also work in this scenario

[@sobrehombre9338]

Thanks!!

[@thyssenbot]

How about position relative + position absolute + top,left,right % + z-index?

[@OverlordHB]

I just have to ask. Why no solution with negative margins? Isn´t that way easier and gives you full controll?

[@brunofrancisco9992]

i've always did with pseudo elements, becase sometimes for animations it's easier

[@ronaldomaia]

Liked the second option

[@Babongile-fc8sz]

I made my sticky header transparent but when I scroll content it meshes up with the header instead of fading away. Any remedies on how to fix this?

[@JustJames-Gaming]

I actually use :before & :after for these types of things

[@cenkakay3506]

I make it look like there is overlap. I divide it into 3 parts. I give the middle piece a two-color background with a linear gradient. I don't have to think about such a position.

[@cenkakay3506]

Other solutions may cause problems on different screen sizes.

[@hakansalih]

03:34 box-shadow: 0 -100px 0 green, 0 -200px 0 green

[@pedrogris]

Linear gradient ftw 🙌

IMHO the introduction for this video should have been better. I was confused for the first few minutes which element was which. In addition It would also be nice to see the performance impacts of each solution. Box shadow does impact render performance somewhat which is why I do not like to use it to simulate 'flat' region.

[@Turabbo]

I would say it's extremely unlikely that you're genuinely developing on such a bleeding edge of site delivery that a box shadow would have any measurable impact on your site's performance whatsoever. If you're genuinely in that situation, there are probably so many thousands of other avenues for you to hunt better gains in content delivery and optimisation before a box shadow becomes a low hanging fruit.

[@hariprasatht9082]

You read my mind

[@dev-j1k]

What CSS animation are you using for your eyebrows 😅

[@pierrefults5652]

What is the codepen for this video?

[@hjetwd]

and if the upper section changes height or disappears altogether, will both of your solutions work correctly?

[@KevinPowell]

This assumes there is always an upper section, but with the names I've given them. More realistically, you'd probably have a regular background, and "expand" it with a modifier when needed. As for the height of the top section, it won't adapt to that, no. It's more about "how far do you want it to exdend", rather than "it should line up to this specific place on the top section"

[@hjetwd]

@@KevinPowell .footer:has(.footer-section) { background-image: linear-gradient( to top, var(--footer-background) var(--footer-overlap), transparent var(--footer-overlap) ); } .footer:not(:has(.footer-section)) { background-color: var(--footer-background); } have to use :has() to make it work 🤣

[@PascalHorn]

First thing that came to mind was something like: .site-footer__top gets: - background-color: the lighter blue, - max-width: 60em; - margin-inline: auto; - margin-bottom: -4em; and .site-footer__bottom gets: - background-color: the darker one, - width: 100%; (default), - padding-inline: calc(50% - 30em); - box-sizing: border-box; So many ways now. 😄

[@GbemigaAtolagbe]

Can't find the code in the description.

[@nickveldkamp5396]

I use pseudo elements (::before, ::after) to solve this example 😊😊😊 Give them a height relative to there parent element👌

[@dee23gaming]

My simple brain just immediately defaults to negative margin 😅

[@securefolder4548]

Ig this method is hard to make mobile responsive, if we use negative margins it'll be easier right ?

[@SubhamoyRay-wc6vx]

Hi, I did not find the source code link so that i can grab the html and can practice the css, can anyone please guide me from where to find it?

[@OrkhanFattayev]

This method ensures that the bottom section begins at the midpoint of the top section's height footer { display: grid; grid-template-rows: 1fr 1fr auto; } .top-section { grid-row: 1 / 3; grid-column: 1 / 1; z-index: 1; } .bottom-section-wrapper { grid-row: 2 / 4; grid-column: 1 / 1; display: grid; grid-template-rows: subgrid; } .bottom-section { grid-row: 3 / 4; grid-column: 1 / 1; }

[@JawsoneJason]

Why not negative margin as a solution?

[@bijan-f]

Is there an actual difference between 'wrapper' and 'container?' I've always used the terms interchangeably.

[@MatiasMeno]

They basically mean the same thing, but because of the new css container query functionality, many prefer to use the name wrapper instead.

[@carlhumm4489]

In another video I watched I believe he mentioned swapping back to using wrapper over container as a matter of preference. After 'container' queries were introduced to CSS he preferred to use the term container for setting queries. Wrapper as a term was already well understood so it makes sense. The video in question was: Start over-engineering your CSS | Kevin Powell | CSS Day 2024, timestamp: 6:50.

[@KevinPowell]

As the others have said, they're interchangable terms, but with container queries being a thing now, I've switched to wrapper exclusively.

[@JamesWelbes]

What about Pseudo elements?

[@cryothic]

I tend to use the background-image solution. Somehow I never thought about the box-shadow for this problem. And using negative margins always ends up with more troubles when the content is dynamic. I mostly do CMS-based sites, so the content can always be different then what was in the original design. Content gets bigger, stuff overlaps, and we need to recalculate every margin again. No thanks.

[@virtual5754]

But what about mobile version? Is it responsive?

[@carltongordon]

::before or ::after could work as well

[@AshishChaubeys]

Awesome 👍

[@AmitB]

Might be an overkill but surely a grid with overlapping areas/rowspans could work

[@lintgamer558]

I always just use a ::before

[@kevinbatdorf]

outline probably more performant than box shadow.. maybe

[@Zacban]

using background seems cleaner.

[@boldureans]

Why overcomplicating things and not using negative margin for that block?

[@Владимир-е6щ9ч]

border-top?

[@IAmAdamTaylor]

Would push the element down. If applied to the bottom div it would increase the spacing between the 2.

[@SteveRodanFilms]

I would want the gradient stop exactly 50% into the top section

[@m4saurabh]

Use grid

[@plastikbeau3695]

These solutions only work for flat color backgrounds, negative margins and grid overlaps would work for anything.

[@_g4m3r_]

Isn't negative margin a simple and effective solution? Why overcomplicate it?