I have a couple elements on my page which use the float property for positioning purposes. I added two absolutely positioned divs inside a relatively positioned div to try to vertically stack the divs using z-index. Now the float property is being ignored.
Please follow this link and look at the div with the ID of main-content. I successfully stacked the child elements of main-content but the footer now ignores the float property and the width of the child elements of the main-content div no longer works.
How do I position my divs without using float, flex, or flexbox as they are not supported by all browsers?
Coot gave you a good solution, but I will explain what is probably happening to your original code, for educational purposes ;).
Before I start, I would recommend you donāt get in the habit of using IDs as selectors unless they are absolutely necessary. They are will really mess with the specificity of your rules down the line.
Now to your code.
When you position something absolutely, you take it out of the normal āflowā. this means that as far as#parent is concerned #child-1 and #child-2 do not exist ( so itās essentially empty) and itās collapsing.
UNLIKE float you canāt clear absolutely positioned elements ( again, they are as if they didnāt exist in the normal flow)
Your child elements are overflowing #parent and thus you are getting what you see.
Absolute positioning is NOT really good for laying out content grids ( or much of anything for that matter)
Also ā¦
Vertical stacking is the default behavior in HTML block elements. You really donāt have to do anything to vertically stack divs.
Hi, thank you so much for replying and attempting to help. I think that you misunderstood what I meant when I said vertically stacking DIVs. What I meant was that the DIV with the highest Z-Index value will be placed on the top most layer of the stack and the one with the second highest Z-Index will be hidden just one layer below it on the stack and so on.
The only way I know how to stack DIVs like that is to place the DIVs to be stacked in a relatively positioned parent DIV. Then the Divs to be stacked are given absolute positioning.
Cootās suggestion does not work. I am looking for a way to stack DIVs using Z-Index where the DIV with the highest Z-Index value is on top of the stack and the only one visible. All other DIVs are hidden below the DIV with the highest Z-Index value. How do I do that without using relative and absolute positionings?
I think people got the wrong idea when you say āVerticallyā as they will think of that as the y axis (up and down the page). But it sounds like you do mean z. So yes you probably will need some positioning for that.
Looking at the fiddle, Iām struggling to visualise that layout you intend on, and why you want to stack the elements.
Perhaps if you could explain why and maybe give a simple sketch of the intended layout an answer could be offered.
Hi, thanks again for your help. Using negative margin to show and hide will work if I only have two DIVs to show and hide. However, on my web page I have several DIVs which I would like to show and hide randomly. This is done by randomly setting the Z-index of each DIV every 5 seconds with Javascript. I think it will be difficult to use negative margin to show and hide DIVs randomly using Javascript.
Thank you so much, your solution works great. I was tinkering with another solution which simply shows and hides DIVs using display:block and display:none and it works as well. I will definite use your solution in my own work.