Streaming live at 10am (PST)

How to stack two elements on top of each other inside a parent div?

Yeah, I know this is basic, but EVERY #%^@# TIME I try to do this, I can’t figure it out.

parent div - 100% width within the container it is in, manually change height to breakpoint
\ image - covers the size of the parent div
\ div - nice gradient that also covers the size of the parent div (and is on top of the image)

This sounds amazingly logical and simple, but I just don’t get it. Is the only way to do this to use background images? I thought if the parent dive had overflow hidden, the image would then scale within? OR, ignore that I have no clue what I’m talking about.

In addition to the answer, to whomever answers it, how did you learn how to do this? Because, the Webflow tutorials are severely lacking in real day-to-day basics. It shouldn’t take me 45 minutes of staring at code I’m not supposed to have to know on Stackoverflow while wanting to ram my fist through a window because I still have no idea.


USE POSITION ABSOLUTE - or share your read only link :slight_smile:

You can do this by two ways - by position absolute (this is most likely the solution you are looking for) or by using grid and filling the same area with both elements.

How to do the position absolute method:

  1. Make sure that your parent element has set height and width (it shouldn’t be auto).
  2. Set the positon atribute of the parent element to relative. The site shouldn’t change in any way after you do this. (If you don’t set the parent to relative, your elements will get aligned to the Body instead after you finish all the steps.)
  3. Set the position of the two child elements to absolute. Right now the elements should be overlapping and aligned to the upper left corner of the parent element. If you want to change their position, use the tiny images below the Position: Absolute - they will set the percentages for you automatically, or just overwrite the values yourself until you are happy with the placement.

Hmmm… I guess this is where I always get stuck. I want the parent element to be auto, so it still automatically scales with the responsive width of the browser/device. Is that then not even possible?

I did NOT know, that you can manually stack elements in the grid… wow, interesting. I will experiment with that. It seems absurd to have a grid of 1 row/1 column, of course. But, it’s a direction I didn’t think of for this, and I’m sure will use in the future. Thanks for mentioning that.

Let me give the above a try. Cheers!