HTML / CSS定位使導航欄右下浮動

Question

我正在嘗試使導航欄在容器內浮動到底部

導航欄現在位於底部，但是它不在容器（.wrapper）代碼中，因此現在的問題是，如何使它在包裝器中正確定位？

style.css中的站點頭代碼：

.site-head {position: relative; display: table; width: 100%; padding-top: 50px; background: #203041 no-repeat center center; background-size: cover;}

style.css中的容器代碼：

.wrapper { width: 100%; max-width: 1240px; margin: 0 auto; }

style.css中的導航條形碼：

a {color: #FFFFFF; text-decoration: none; font-weight: bold; }
a:hover {color: #cc3727;}
header {background: #fff; width: 100%; height: 180px; position: fixed; top: 0; left: 0; z-index: 100; background: #203041 no-repeat center center; background-size: cover;}
nav {poistion: absolute; right: 0; bottom: 0; float: right;}
#menu-icon {display: hidden; width: 40px; height: 40px; background: #4C8FEC url(images/menu-icon.png) center;} 
a:hover#menu-icon { background-color: #444; border-radius: 4px 4px 0 0;}  
ul { list-style: none; padding: 0; } 
li {display: block;float: left;padding: 10px; font-family: 'Proxima Nova Light', 'Open Sans', sans-serif; color: #FFFFFF;}
.active {color: #cc3727;}

使用的HTML：

    <header class="site-head">
    <div class="cf wrapper">
    <div class="logo">
      <span class="site-logo">Logo</span>
    </div>
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a href="#">Home</a></li>
            <li>|</li>
            <li><a href="#" class="active">Music</a></li>
            <li>|</li>
            <li><a href="#">Videos</a></li>
            <li>|</li>                
            <li><a href="#">Social</a></li>
            <li>|</li>                
            <li><a href="#">Bio</a></li>             
        </ul>
    </nav>
    </div>
</header>

我沒有碰運氣就瀏覽了一些stackoverflow線程。 我是制作網站的新手。

這是一個jsfiddle： http : //jsfiddle.net/ua9hq72g/

編輯：@Amit通過校對解決了該問題。

編輯編輯：導航欄現在位於底部，但是它不在容器（.wrapper）代碼中，因此現在的問題是，如何使它在包裝器中正確定位？

Answer 1

使用正確的拼寫有幫助。 當您輸入錯時，JSFiddle會提示您，但是您需要保持整潔 ，並注意紅色語法高亮。

位置！=位置

nav {position: absolute; right: 0; bottom: 0; float: right;}

工作提琴