学习CSS布局

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