three absolute positioned divs inside one div acting strangely - css

Question

im exhausted, why is this absolute positioned footer do not stick to the bottom of its relative parent? thanks in advance
html {
height:100%;
}
body {
position:relative;
min-height:100%;
}
.nav {
position:absolute;
top:0;
width:100%;
padding:10px;
}
.wrapper {
position:absolute;
min-height:calc(100% - 100px);
width:100%;
opacity:0.4;
margin-top:100px;
padding-bottom:50px;
}
.footer {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
}
https://jsfiddle.net/182L8fus/

Answer 1

absolute The element is positioned relative to its first positioned (not static) ancestor element
fixed The element is positioned relative to the browser window
relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html {
height:100%;
display:block;
}
body {
min-height:100%;
display:block;
}
.nav {
position:absolute;
top:0;
background:grey;
width:100%;
padding:10px;
}
.wrapper {
position:relative;
min-height:calc(100% - 100px);
width:100%;
opacity:0.4;
margin-top:100px;
padding-bottom:50px;
}
.footer {
width:100%;
height:50px;
position:relative;
background:grey;
bottom:0;
left:0;
}
<div class="nav">home</div>
<div class="wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan sollicitudin augue, non condimentum neque molestie vitae. Mauris eget tortor euismod, elementum arcu ac, dapibus arcu. Donec nec risus quis mi vulputate varius ac ut magna. Mauris condimentum, mi sit amet pulvinar aliquet, magna purus interdum enim, sit amet mattis ipsum mi et nunc. Vivamus non tristique mi. Maecenas iaculis ornare felis sit amet condimentum. Quisque molestie ullamcorper hendrerit. Ut ut libero tincidunt, aliquet sapien nec, congue velit. Sed malesuada sapien non magna scelerisque pharetra. Suspendisse posuere nunc eu quam fermentum ultricies sit amet et sapien. In eleifend quam non tincidunt faucibus. Proin commodo a ex ut blandit. Donec sagittis, risus eget lacinia ultrices, sem risus aliquet orci, id lacinia libero erat at mauris. Nulla vestibulum volutpat lacus in sodales.
Sed accumsan tristique leo, nec iaculis dolor rutrum congue. Suspendisse sed arcu lectus. Cras metus felis, efficitur non libero ut, condimentum blandit velit. Aenean pellentesque lacinia sem in fermentum. Nam egestas ac felis a eleifend. Sed eget dui leo. Ut vehicula blandit diam, vitae porttitor diam iaculis quis. Sed consectetur, sem vel tempus tincidunt, eros ex finibus ante, et porta justo velit ut mi. Sed ac tincidunt lorem. Nullam nisi tortor, ullamcorper a tristique et, aliquam vitae lectus. Morbi nisi erat, pellentesque eu elit vel, dictum rutrum diam. Ut ac augue mauris. Quisque eu tincidunt lacus, et rutrum augue. Quisque sed posuere lacus. Etiam ornare eros condimentum sem tempor ullamcorper. Vestibulum convallis augue diam, ac tempus ipsum facilisis quis.
Aenean luctus non justo ut euismod. Integer convallis libero et lectus varius, eu bibendum massa molestie. Curabitur et bibendum orci. Curabitur eleifend sollicitudin purus et aliquet. In maximus consectetur sem, eu rhoncus metus finibus ut. Proin sit amet laoreet mi. Pellentesque bibendum imperdiet purus, a viverra elit ultricies non. Duis bibendum sem eu neque sagittis rhoncus. Aenean nibh erat, dignissim nec augue ut, efficitur sagittis libero.
Praesent vel sagittis dolor. Donec vestibulum, nisi quis faucibus porttitor, metus ex gravida mi, ac bibendum lectus enim at velit. Mauris malesuada tincidunt ipsum nec auctor. Donec quis semper lectus. Maecenas maximus sodales diam, nec cursus dui laoreet a. Sed nibh massa, maximus sed felis nec, dapibus faucibus nunc. Maecenas posuere libero in dolor pellentesque tincidunt. Vivamus sit amet leo velit. Praesent ultrices tincidunt erat, feugiat hendrerit nisl aliquet vel. Ut varius vulputate tortor, vel sollicitudin neque porttitor sed. Sed imperdiet egestas enim, sed consectetur justo pulvinar ut. Vestibulum viverra risus non urna laoreet, quis porttitor neque volutpat.
Praesent facilisis lectus quis urna ornare mollis. Maecenas consectetur mauris in blandit aliquet. Aliquam hendrerit vulputate mauris vel feugiat. In neque nisl, tempus eget congue in, mattis eu felis. Pellentesque ut ex vel enim euismod viverra nec quis urna. Mauris lacinia aliquet magna, sed lacinia metus aliquam a. Sed bibendum nisi sed augue sodales bibendum. Fusce vulputate tincidunt magna, et iaculis odio posuere eu. Quisque interdum, diam et aliquam euismod, nisl arcu pellentesque magna, et dictum lorem metus quis justo.</div>
</div>
<div class="footer">footer</div>

Answer 2

Your footer is inside the .wrapper div which also has position: absolute.
Change the settings as follows:
.wrapper {
position:relative;
min-height:calc(100% - 100px);
width:100%;
opacity:0.4;
padding-top:100px;
padding-bottom:50px;
}
https://jsfiddle.net/hvvq47fu/