div above div (both bottom: 0px;) - html

Question

I want to align elements inside div
a - > to the top
b - > to the bottom
c - > above b element (but also to the bottom of the div container)
#container { position: relative}
#a { position: absolute; top: 0px;}
#b { position: absolute; bottom: 0px;}
#C {????}
I didn't find a way for C

Answer 1

You can use another container for below divs.
<div id="container">
<div id="a"></div>
<div id="container-below">
<div id="b"></div>
<div id="c"></div>
</div>
</div>
#container { position: relative}
#a { position: absolute; top: 0px;}
#container-below { position: absolute; bottom: 0px;}

Answer 2

You can put c inside b and position it absolutely with bottom: 100%, thus c will always be on top of b.
.d {
position: relative;
height: 200px;
width: 200px;
float: left;
margin: 0 5px;
border: 1px solid green;
}
.a, .b, .c{
position: absolute;
width: 100%;
min-height: 40px;
left: 0;
}
.a {
top: 0;
background: lightgreen;
}
.b {
bottom: 0;
background: tomato;
}
.c {
bottom: 100%;
background: orange;
}
<div class="d">
<div class="a">a
</div>
<div class="b">b
<div class="c">c
</div>
</div>
</div>
<div class="d">
<div class="a">a
</div>
<div class="b"> Block b Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsu
<div class="c">c
</div>
</div>
</div>

Answer 3

please start using flexbox and soon css grids :P
.p > div {
width: 100px;
height: 100px;
border: 1px solid red
}
.p {
height: 500px;
display: flex;
background-color: beige;
width: 200px;
flex-direction: column;
}
.b {
margin-top: auto;
}
<div class="p">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>