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. vue项目导入外部css样式和js文件

    <template> <div id="app" > </div> </template> <script src=" ...

  2. 用css实现圆形波浪效果图

    在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以. 原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢 ...

  3. 排错-lr回放错误Vuser failed to initialize extensi...解决方法

    lr回放错误:Vuser failed to initialize extension LrXml.dll解决方法   by:授客 QQ:1033553122 步骤1:找到LR安装位置,打开协议目录 ...

  4. Django基础篇--模板和路由分发

    Django模板 首先什么是一个模板? 简单来说就是一个网页,可以被view响应给用户 目的是为了解决复杂的显示问题 2. 模板的设置问题 setting.py中的TEMPLATES配置 1)BACK ...

  5. ::before和::after伪元素的妙用

    场景: 假如有一天,你的在写一个前端项目,是关于一份点餐商家电话信息表,你啪塔啪塔地写完了,突然间项目经理跑过来找你,要求你在每一个商家的电话号码前都添加一个电话符号,来使得电话号码更直观和页面更美观 ...

  6. (网页)web性能优化(转)

    转自CSDN: Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行 ...

  7. javascript模块化编程-详解立即执行函数表达式IIFE

    一.IIFE解释 全拼Imdiately Invoked Function Expression,立即执行的函数表达式.  像如下的代码所示,就是一个匿名立即执行函数: (function(windo ...

  8. 将 Azure VM 迁移到 Azure 中的托管磁盘

    Azure 托管磁盘无需单独管理存储帐户,从而简化了存储管理. 还可以将现有的 Azure VM 迁移到托管磁盘,以便受益于可用性集中 VM 的更佳可靠性. 它可确保可用性集中不同 VM 的磁盘完全相 ...

  9. python第四天 三级菜单新思路

    今天是一个坎,在做三级菜单时卡住了,因为想要简洁的代码,就要用到递归函数,卡的不要不要的!不过最后在同学老师的提点帮助下,还是解决了! 2017-5-10发现之前的代码有BUG今天 修改了! 作业要求 ...

  10. <转>通过反射获取Form/MenuStrip/ContextMenuStrip等列表

    private void button1_Click(object sender, EventArgs e) { treeView1.Nodes.Clear(); Assembly a = Assem ...