Position above/overlay z-index

Is it possible to position elements above one another I would like to add this gradient section and some buttons etc above the image

image

Of course you can do this.
Here’s a short tutorial explaining how to overlay one element over another:

You can also do it using custom CSS directly in your styles CSS files.

1 Like

Hey thanks for that I did already check the guide out, my issue is that I just want to use a container and give it a background, it seems to be forcing me to have some element inside to see the gradient.

What component do you suggest I should use?

You just need to define the width/height of a container and it will show the background.

Without anything inside or set dimensions and container on its own has no dimensions.

1 Like

I did set the dimensions before without any result,


Have you tried viewing in browser?

I believe in Wappler, in the design view, an empty section/container displays as that ‘grey label’ view that you can see in your screenshot.

If you view it in a browser, or put any content in the sections, you should see the color

1 Like

In the browser it’s not display, I would like to create a fade transition over the image when hovered or active. 0% white -> 22% so there’s no content in there. Thanks for your help anyway I will try revisit this topic later.

Yes, you need some content in the sections when using % for sizing. 100% of nothing is nothing.

1 Like

Do you know a way I can make the section expand to fit the parent? my grid is responsive so I think can’t use px dimension

Agreed. Id just put something in their for now to help visualise it. A paragraph element will have some dummy text if its a blog post. Or an image.

What you’re after is perfectly easy to achieve, whether using the visual design panel or some custom CSS.

But start with either some fixed widths, 100px etc. or put some content in their and that way you will be able to see it in the Design view

1 Like

What do you plan to have in those sections? Just put some dummy text or image or whatever content you had planned for those sections. Doesn’t have to be your final content - just some content.

1 Like