首页 > 代码库 > 学习CSS布局 - position例子
学习CSS布局 - position例子
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会溢出到容器的外面。
之后我们会讨论下其他布局技术,它们都各有优劣。
学习CSS布局 - position例子
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。