Objects resize to fit elements with different z-indexes

Hello.

I am trying to create a hero-like section that contains an image or slider with text overlaid on top of it.

I know that I can use a background image with text on it, but that does not solve my slider issue.

I have set the slider with a z-index of 1 and a text container with a z-index of 2. Both entities are set to “relative positioning”. This displays the static text on top of the slider - just as I had hoped.

The problem is with the object that contains both of these elements. I have tried to do this in sections and div blocks. I get the same result, no matter which. I set the section/div to auto-size based on the elements within. I have also tried to set width value of 100%. No matter what I seem to do, the section/div sizes itself as if it had to fit both overlaid elements in separate areas - as if they are not overlaid. This results in about 60 pixels of white padding below the image/slider inside the section/div.

Does someone know how I can get the section of div to size appropriately when using z-indexes to overlay objects?

I have put together a sample project so this behavior can be seen. I have also opened up the project so you can see how I set it up.

http://z-order.webflow.io
https://webflow.com/design/z-order
https://preview.webflow.com/preview/z-order?preview=ab3b3f252102f66bd535d9af106d17c0

I appreciate your help!
.pat styles

Hi Pat,

Thanks for the in depth post. To do a hero image or any full background image, you don’t actually use an image block. You select the section, or slide if it’s a slider, and add the image as a background image set to cover. That will make the image cover the entire object and you can then size it however you want. I think that is what is going on in your example, you have an image block instead of just setting the background of the section itself. Hope that helps!

Hello Dave.

I appreciate the answer. But I think my 2 examples using an image instead of a slider have distracted from the main point.

I want to display static text over a slider.

So the question is about using z-indexes.

I only used images as an example that the problem I am experiencing is not limited to sliders, but any object that should set the size of the parent section or div block.

.p

I don’t have any issue allowing objects set the size of a block unless there is another object already setting the size. Can you update your example with a more basic example?

Hello Dave.

I really appreciate your help. I hope you know that. That is why I also hope you know I am being sincere when I say I don’t know how to boil this example down to a simpler scenario.

This example contains 4 different instances of the same thing. All 4 have a block with 2 objects within them. In each instance the 2 objects are at different z-indexes so they should overlay each other. And in each instance, the block size is set so that each object can fit in the block without being overlaid.

I am happy to try to simplify the example, but could you give me some guidance on how to do so? What factors should I remove?

thanks so much,
.p

As far as I am seeing in your example, the text IS overlaying onto the sections they are placed on top of.
Relative positioning takes into account the other elements on the page. So if you have block A and Block B both set to relative, and block A set to z index 1 and Block B set to z index 2, they will not automatically be on top of each other. This is because they are relatively positioned to each other. To get them to stack on top of each other, automatically, you must choose absolute positioning. If this doesn’t answer your question, please give me the exact class names in your example and what you expect them to do/what they are doing and I can investigate.

Also check out this great resource on the common CSS properties. Intro to HTML & CSS - Webflow University Documentation

Hello Dave.

Yes, the text is overlaying exactly as I had hoped.

The topic of this discussion is that the parent block is not sizing correctly to fit overlaid objects within it.

To demonstrate this, I have changed the demo project.

The first “hero section” contains 2 objects within it that are set to relative position and at different z-indexes so they will overlay…
- “hero image”
- “overlay text container”
Below the “hero section” is “separator section” that displays where the “hero section” ends.
In this case, the first “hero section” is sized correctly to fit the width of the “hero image”. However it is sized too long on a vertical axis. And it is vertically sized, not coincidently, too long by the exactl vertical height of the “overlay text container” that is properly displaying over the “hero image”. It is acting as if it is creating enough space to fit “overlay text container” below “hero image” when it actually overlays it.

For contrast, I have set up a second “hero section” below the previous example. It contains only one object.
- “hero image”
You can see by the location of the “separator section” below it, that the “hero section” is dimensioned exactly enough to fit the “here image”. Perfect. This is what I want the first “hero section” to be sized at.

After reading your text, I tried using “absolute” positioning on the “overlay text container”. This resulted in text that was in a fixed position on the entire web page.
And I tried using “fixed” positioning on “overlay text container”. This resulted in text that was in a fixed position in the browser window that displays the web page.
I want the text position to be relative to the section/div block that contains it. Same for the image object as well.

The article you pointed to me had some good information and I read it all. But I didn’t see anything about the unexpected behavior I got when using z-indexes.

thanks so much,
.p

In regards to the first example, YES, relative positioning will leave the space for that element wherever it is sitting. This is because that element actually is there, it is taking up that space and you are simply moving it up. But that does not displace it. This has nothing to do with z indexes, simply positioning.

If you want to keep using relative positioning you must offset the space it takes up. You do this by creating a negative margin for the exact height of that object.

I made a video to show this. http://quick.as/AnmOCmyox

I must warn you though, most of the things you are doing in your example do not require this type of positioning.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.