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. Web应用架构入门之11个基本要素

    译者: 读完这篇博客,你就可以回答一个经典的面试题:当你访问Google时,到底发生了什么? 原文:Web Architecture 101 译者:Fundebug 为了保证可读性,本文采用意译而非直 ...

  2. JqGrid: paging int asp.net

    https://www.codeproject.com/Articles/1118363/GridView-with-Server-Side-Filtering-Sorting-and-Pa http ...

  3. “一切都是消息”--iMSF（即时消息服务框架）之【发布-订阅】模式

    MSF的名字是 Message Service Framework 的简称,由于目前框架主要功能在于处理即时(immediately)消息,所以iMSF就是 immediately Message S ...

  4. Android 云之声离线语音合成

    离线语音解析 public class SpeechUtilOffline implements TTSPlayerListener { public static final String appK ...

  5. WANem广域网环境模拟

    背景 在测试过程中,往往需要模拟网络环境较差情况下,体验情况,故引入广域网模拟工具辅助测试 安装WANem 步骤1:光盘引导WANem镜像: 步骤2:启动(或者新建虚拟机——选择other insal ...

  6. 使用wxpy来实现自动发送消息统计微信好友信息的功能

    发送消息太频繁会出现禁言消息 1:导入wxpy模块 pip install wxpy pip3 install wxpy #二者选一 调用模块 # 导入模块 from wxpy import * # ...

  7. Spring Boot 中配置文件application.properties使用

    一.配置文档配置项的调用(application.properties可放在resources,或者resources下的config文件夹里) package com.my.study.contro ...

  8. .NET 控制Windows文件和目录访问权限研究（FileSystemAccessRule）

    前一段时间学习了.net 控制windows文件和目录权限的相关内容,期间做了一些总结.想把这方面的研究跟大家分享,一起学习.其中不免得有些用词不太标准的地方,希望大家留言指正,我加以修改. 首先,我 ...

  9. [20171221]利用rman实现2台机器文件拷贝.txt

    [20171221]利用rman实现2台机器文件拷贝.txt --//昨天使用rman duplicate建立dg,我看到执行如下代码: RMAN> duplicate target datab ...

  10. 【PAT】B1072 开学寄语（20 分）

    代码注释应该很清晰 先存下违禁品,放到数组中,未使用map #include<cstdio> #include<string.h> int wupin[10],N,M; boo ...