標籤：sed log css布局 dig dip 觀察 sum oct int
position例子通過具體的例子可以協助我們更好地理解“position”。下面是一個真正的頁面配置。
結果：
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>position例子</title> <style> * { box-sizing: border-box; } .container { position: relative; width: 100%; height: auto; border: 3px solid green; } .nav { position: absolute; width: 20%; border: 3px solid red; } section { position: static; /* default:static */ width: 80%; height: auto; padding: 20px 5px; border: 3px solid hotpink; margin-left: 20%; } .footer { position: fixed; width: 100%; height: 70px; bottom: 0; left: 0; border: 3px solid salmon; text-align: center; line-height: 70px; } </style></head><body> <div class="container"> <div class="nav"> <ul> <li href="#"> <a href="#">Home </a></li> <li href="#"> <a href="#">Tlico Menu </a></li> <li href="#"> <a href="#">Drlift List </a></li> <li href="#"> <a href="#">Hours </a></li> <li href="#"> <a href="#">Directions </a></li> </ul> </div> <section> section 的 margin-left 樣式確保了有足夠的空間容納 nav 元素。 </section> <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> <section> 注意觀察當你調整瀏覽器視窗時發生了什麼。效果很贊！ </section> <section> 這個例子在容器比nav元素高的時候可以正常工作。 如果容器比nav元素低，那麼nav會溢出到容器的外面。 之後我們會討論下其他布局技術，它們都各有優劣。 </section> </div> <div class="footer"> 如果你使用了一個固定定位的頁首或頁尾. </div></body></html>
這個例子在容器比nav元素高的時候可以正常工作。
如果容器比nav元素低，那麼nav會溢出到容器的外面。
之後我們會討論下其他布局技術，它們都各有優劣。
原文地址： http://zh.learnlayout.com/position-example.html
學習CSS布局 - position例子
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
