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. EditPlus配置

    1.设置语法和字符 2.调用浏览器 3.设置字符编码

  2. CSS常见布局

    一.单列布局 1. 水平居中 1.1 使用inline-block和text-align .parent{text-align:center;} .child{display:inline-block ...

  3. 百度地图坐标偏移，微信小程序地图偏移问题，腾讯地图坐标偏移

    解决方案: 如果用百度的地图获取的坐标点,在微信小程序内使用,就会出现偏移 算法(lat和lng是经纬度,球面坐标): To_B是转到百度,To_G是转到GCJ-02(谷歌,高德,腾讯) var TO ...

  4. 访问WEB-INF下的jsp页面

      访问web-inf下的jsp文件, 1)使用springMVC,一般都会使用springMVC的视图解析器,大概会这样配置 <!--jsp视图解析器--> <bean class ...

  5. 【代码笔记】Web-ionic 网格(Grid)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. CSS字体超出两行省略

    text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...

  7. vue.js及项目实战[笔记]— 01 vue.js

    一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 j ...

  8. python自动化开发-3

    python里的集合 1.集合的概念 集合(set):把不同的元素组成一起形成集合,是python基本的数据类型.set集合,是一个无序且不重复的元素集合. 2.集合的主要作用 1)去重 举例说明: ...

  9. js取得background属性url的值--移动端【踩坑】

    获取一个图片的地址(该图片的路径是写在css的background-img属性中的),一般实现方式: var topimg = $(".topbg").css("back ...

  10. 2.网络编程-udp

    # 使用套接字发送udp数据import socket s = socket.socket(socket.AF_INET, SOCK_DGRAM) s.sendto(b"hello" ...