Place absolute div under relative div - html

Question

I don't know if is possible through CSS only to have one absolute footer under a relative element - being the relative one different in height due to the nature of it: either change of content or responsiveness. My HTML (using Angular 5):
<main>
<app-navbar></app-navbar>
<div class="content-container" [#fadeAnimation]="routeTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<app-footer></app-footer>
</main>
The reason why I want to have that is because the relative element contains the view of the user and I'm using angular animations which happen to "require" the elements that get displayed being absolute positioned in order to get the desired visualisation.
The problem with that is that for large elements I am having issues because the footer which is also absolute, does overlap the actual content if that makes sense.
I want to have a "sticky footer" at the bottom of the page so that it has absolute configuration etc (app-footer will render footer):
footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
My CSS:
main{
padding-top: 10px;
padding-bottom: 100px;
}
.content-container{
position: relative;
}
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
That was working fine till I added the relative to the .content-container to have the absolute position to the inner element.
A possible workaround I came across was to give a fixed height to the .content-container class and do the different resolutions so I can push down the footer. However I don't think that's possibly the best approach. I'm using Angular 4 if that's of any help. I also had a look at How to position element below relative positioned element without overlapping? but again, the suggested solution was to do with hardcoding the height.
UPDATE 1: I have updated the question with more detailed info. Hope it is now clear.
UPDATE 2: Plunker: https://plnkr.co/edit/FHhncrGBcO9jaNRiUfJQ?p=preview

Answer 1

Parent:
position: relative;
Child:
position: absolute;
z-index: 2;
top: 100%;

Answer 2

If I understood your problem, you need to set a position: relative and a z-index to your .content-container.
Keep in mind that the z-index and the absolute positioning refers to the next relative parent. This is the body by default, but it could be a div with a position: relative in-between.
.content-container{
position: relative;
z-index: 2;
background-color: rgba(180,100,50,.7);
padding: 85px 20px;
}
footer{
position: absolute;
bottom: 0;
z-index: 1;
background-color: pink;
padding: 20px;
}
<main>
<div class="content-container">
content
</div>
<footer>footer</footer>
</main>

Answer 3

I would suggest to use position:fixed for your footer.
For example:
footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
"fixed" means: relative to the view-port (and not relative to the nearest element with a position)

Answer 4

If I understand you, use a z-index
footer {z-index:0;}
.content-container {z-index:1;}

Answer 5

Currently your looks like this:
content-container is a div. It has explicitly set relative position to the document, since there is no node above with position: relative
after content-container there is a footer with position: absolute. Since there is no node with relative position above, it is absolute to the document
Based on what you write, footer overlaps content. And this is true. Because content-container and footer are positioned to the document, so are on the same level. That means they are rendered based on the document order:
Content container is rendered
Footer is rendered
Since that said, because footer is rendered last, it will overlap content container content.
To fix it you need to make sure footer will be rendered before content, or make sure whatever order they are rendered, footer will be rendered above.
To change rendering order you can just reposition container-content in the HTML code and place it after footer div.
But this is a fragile and troublesome solution.
There is fortunately a solution to this problem. You can explicitly indicate on what layer of rendering element should be. To do this you need to use z-index CSS property.
footer {
z-index: 1;
}
It tells browser that footer shoud be rendered above, way above other content elements.
Default value of z-index is auto. It translates to a value of 0. So if we set z-index to 1, node will be rendered above other elements on equal level without z-index being set.