【筆記】學習CSS佈局08——position例子
阿新 • • 發佈：2018-11-30
通過具體的例子可以幫助我們更好地理解“position”。下面是一個真正的頁面佈局。
.container { position: relative; } nav { position: absolute; left: 0px; width: 200px; } section { /* position is static by default */ margin-left: 200px; } footer { position: fixed; bottom: 0; left: 0; height: 70px; background-color: white; width: 100%; } body { margin-bottom: 120px; }
這個例子在容器比nav元素高的時候可以正常工作。如果容器比nav元素低，那麼nav會溢位到容器的外面。之後我們會討論下其他佈局技術，它們都各有優劣。
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .container { position:relative; border:5px solid #6ac5ac; } nav { position:absolute; left:0px; width:200px; background-color: #d64087; } section { /*position is static by default */ margin-left:200px; background-color: #fdc72f; } footer { position:fixed; bottom:0; left:0; height:70px; background-color:#96c02e; width:100%; } body { margin-bottom: 120px; } </style> </head> <body> <div class="container"> <nav> <ul> <li><a href="#">static</a></li> <li><a href="#">relative</a></li> <li><a href="#">fixed</a></li> <li><a href="#">absoluted</a></li> </ul> </nav> <section> section 的 margin-left 樣式確保了有足夠的空間容納 nav 元素。 </section> <br /> <section> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </section> <br /> <section> 注意觀察當你調整瀏覽器視窗時發生了什麼。效果很贊！ </section> <footer> 如果你使用了一個固定定位的頁首或頁尾，確保有足夠的空間來顯示它們！我在 body 上面加了 margin-bottom 。 </footer> </div> </body> </html>
效果圖如下：
