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例子的更多相关文章

  1. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  2. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  3. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  4. (四)学习CSS之position、bottom、left、right和top属性

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position 属性规定元素的定位类型. 这个属性定义建立元素布局所用的定位机制 ...

  5. 学习CSS布局 - dispaly属性

    "display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是  ...

  6. 学习CSS布局 - box-sizing

    box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素 ...

  7. 学习CSS布局 - 盒模型

    盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...

  8. 学习CSS布局 - 没有布局

    如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...

  9. 学习CSS布局 - max-width

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 初学CSS-2-文本的属性

    文本装饰属性: 格式:text-decoration:underline: 取值:underline(下划线) line-through(删除线) overline(上划线) none(什么都没有) ...

  2. jQuery之$.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  3. 【读书笔记】iOS-iOS的UI自动化测试

    1,Instruments iOS自带的自动化测试工具. 2,TuneupJs  最早的iOS自动化测试工具 https://github.com/alexvollmer/tuneup_js 3,yn ...

  4. map标签

    map和area 标签配合img标签制作分区超链接效果 http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

  5. Flutter 布局（十）- ListBody、ListView、CustomMultiChildLayout详解

    本文主要介绍Flutter布局中的ListBody.ListView.CustomMultiChildLayout控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. ListBody ...

  6. ImageButton和ImageView设置点击透明区域不响应

    思路 ImageView和ImageButton都可以设置background和设置src,两者的区别自行度娘.由于两者的不同,获取它们的图片资源的方法也不同.倘若设置的是background,那么需 ...

  7. TCP连接之报文首部

    在面试时,会经常被问到TCP报文的一些细节,可以说TCP报文是不少企业用来考察面试者对网络的掌握程度的一道题目. TCP连接作为网络传输的一个环节,是不可或缺的一部分.例如,OSI七层模型的应用层HT ...

  8. 【HANA系列】SAP HANA XS使用Data Services查询CDS实体【二】

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Dat ...

  9. windows10不能获取有效IP的问题

    最近我的windows10系统一直不能有效获取IP地址(无论有线还是无线),但手工设置IP后又能正常上网,所以怀疑是某个服务未启动的原因. 查了一下百度,发现还真是,现将解决方案记录如下: 1.打开系 ...

  10. Flutter在Windows平台下的安装配置

    目录 1. 安装 Flutter SDK2. 设置环境变量3. Flutter doctor4. 安装 Android Studio5. 启动 Android Studio, 安装 Android S ...