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的一些细节

    1.中文符号居中效果 对于动态输出文字可以不用在意,某些页面可能会有类似提示文案的地方,用英文标点符号,对于居中效果比较友好. 2.元素的上下间距 布局的时候从上往下开始写页面,一般都是写下一个的元素 ...

  2. 【代码笔记】Web-ionic-按钮

    一,效果图. 二,代码.index.html文件如下所示. <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. 我的Java之旅 第一课 开发环境准备

    1.JDK JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK). SE(J2SE),standard edition,标准版,是我们通常用的一个版本,从J ...

  4. python自动化开发-4

    装饰器之我见 python里的装饰器到底是个什么东东,初看起来,可能有的小伙伴会发懵啊,哈哈. 先来个装饰器的例子瞅瞅: Author:RYB # __*__coding:utf-8__*__ ''' ...

  5. 手动将经典 VM 从 VHD 迁移到新的 ARM 托管磁盘 VM

    本部分有助于将现有 Azure VM 从经典部署模型迁移到资源管理器部署模型中的托管磁盘. 计划迁移到托管磁盘 本部分可帮助你针对 VM 和磁盘类型做出最佳决策. 位置 选取 Azure 托管磁盘可用 ...

  6. 扩展BootstapTable支持TreeGrid

    (function ($) { 'use strict'; var sprintf = function (str) { var args = arguments, flag = true, i = ...

  7. MVC model验证 获取验证错误信息

    public static class ModelStateExtensions { /// <summary> /// 获取model验证错误信息 /// </summary> ...

  8. StartUML用法

    转载地址  http://blog.csdn.NET/tianhai110 (下面参考了原博主的内容,也加入自己的内容,为了自己脑补,也方便其他看到的人脑补) 使用StartUML绘制用例图:     ...

  9. 鸟哥的 Linux 私房菜Shell Scripts篇（一）

    参考: http://linux.vbird.org/linux_basic/0340bashshell-scripts.php#script_be http://www.runoob.com/lin ...

  10. 使用Gitkraken进行其他Git操作

    使用Gitkraken进行其他Git操作 查看某次 commit 的文件改动 使用 Gitkraken 能非常方便的看到任意一次的 commit 对项目文件的改动. 具体操作是:在树状分支图上单击某个 ...