Position element relative to parent element - css

Question

For example I have fixed nav, is there a way to anchor the list items to the bottom of the nav? I attempted to give the list items a fixed position too but this messes up their layout as you can see at fiddle
here is my code:
#nav {
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav>ul>li {
display: inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: fixed;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
Any suggestions on how this can be done?

Answer 1

When you use a fixed or absolute position it takes an element out of the flow of the document and hence they stack up on top of each other when you apply those positions to the li elements.
Instead you should be absolutely positioning the ul block to the bottom of the #nav:
#nav > ul {
list-style: none;
margin: 0;
position: absolute;
bottom: 0;
}
#nav > ul>li {
display: inline;
}

Answer 2

As I understand your question, you wish to have the list elements at the bottom of your header. Just change position: fixed; to position: relative;. This keeps the elements flow along with the flow of the page.
Here is your solution:
#nav{
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav > ul{
list-style: none;
margin: 0;
}
#nav > ul>li{
display:inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: relative;
top:50px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>

Answer 3

If you want something to be anchored to the bottom of an element, but still remain in the flow of the page, try using relative positioning. That essentially means you give the #nav element relative positioning, and you give the li elements relative positioning as well:
#nav {
height: 75px;
width: 100%;
position: relative;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav ul li {
display: inline;
position: relative;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
This seems to work pretty well, please tell me if it doesn't.
The problem you encountered was that fixed positioning put them all in a mess. Fixed positioning positions ALL the items relative to the viewport, so if you had all the lis with
position: fixed;
top: 45px;
They would all go in the same spot.