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.
I appreciate your help!