Overlay elements

hi -

can’t figure out how to overlay an element over another for a design look.

See loom

Link: Webflow - Ash Personal Website


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey,

an absolute positioned wrapper div (inside “Div block 57”) that wraps the Div Block 59-tag, centers its children horizontally using flex box and has some negative margin should do the trick.

not sure if I did this right but it did not work

Link

https://preview.webflow.com/preview/ashfishman?utm_medium=preview_link&utm_source=designer&utm_content=ashfishman&preview=abad89ef2e87b228b2a1b94ce14d6d9e&pageId=64d26d1ddbc43a0de40369a9&itemId=64d3d6076b74b8313957bb6a&workflow=preview

hi @Asher_Fishman your element sits on top but as text 57 has transparent background you can see through. Just set the color you need.

BTW: The HTML structure should be IMO different if you would like to replicate exact design.

EDIT: here is the video of how it can be done

sweet thanks for this that was super helpful.

A couple questions:

  1. why did you use flex child “align” instead of positioning?
  2. why did you set the outter container to relative and the inner where the title of the box is to absolute? what is the difference if you would have just used the spacing?

I ask because even though i use these setting sometimes, I do not truly understand the difference in all of them. I just see it works but do not know if it is “the best setting” to put

  1. Align is positioning so I do not know what do you mean. Anyway, these days centering elements is much easier and almost everything that is aligned in one direction uses flex but feel free to use the old way.

  2. As I have decided to do it this way as IMO it is how it should be done.

It is all just experience. :man_shrugging: In coding is many ways how to achieve the identical result. You can take some online courses to understand at least some basics of how things work and all will start making sense to you. :wink:

Remember only that everything is just a rectangle and once you start thinking as a developer and have some knowledge about positioning you are halfway there.