position

为了制作更多复杂的布局，我们需要讨论下 position 属性。

它有一大堆的值，名字还都特抽象，别提有多难记了。

让我们先一个个的过一遍，不过你最好还是把这页放到书签里。

先看下运行结果，在看下源码，最后解释一下position的各个属性。

结果：

源码看一下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position</title>

    <style>

        .static {

            border: 1px solid red;

            max-width: 400px;

            margin: 20px auto;

            position: static;

        }

        .relative1 {

            border: 1px solid pink;

            max-width: 400px;

            margin: 20px auto;

            position: relative;

        }

        .relative2 {

            border: 1px solid green;

            max-width: 400px;

            margin: 20px auto;

            position: relative;

            left: 30px;

            top: -30px;

        }

        .relative3 {

            border: 1px solid hotpink;

            max-width: 400px;

            margin: 20px auto;

            position: relative;

        }

        .relative {

            border: 1px solid hotpink;

            max-width: 500px;

            height: 300px;

            margin: 20px auto;

            position: relative;

        }

        .position {

            border: 1px solid lime;

            width: 300px;

            height: 200px;

            position: absolute;

            left: 0;

            bottom: 0;

        }

        .fixed {

            border: 1px solid #e3d2d2;

            max-width: 200px;

            position: fixed;

            right: 0;

            bottom: 0;

        }

    </style>

</head>

<body>

    <div class="static">

        static 是默认值。<br />

        任意 position: static; 的元素不会被特殊的定位。<br />

        一个 static 元素表示它不会被“positioned”，<br />

        一个 position 属性被设置为其他值的元素表示它会被“positioned”。<br />

    </div>

    <div class="relative1">

        relative 表现的和 static 一样，<br />

        除非你添加了一些额外的属性。<br />

    </div>

    <div class="relative2">

        在一个相对定位（position属性的值为relative）的元素上<br />

        设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。<br />

        其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。<br />

    </div>

    <div class="relative3">

        随意改变relative2的div的位置,是不会影响<br />

        relative1和relative3的<br />

    </div>

    <div class="relative">

        这个元素是相对定位的。如果它是 position: static; <br />

        那么它的绝对定位子元素会跳过它直接相对于body元素定位。<br />

        <div class="position">

            这个元素是绝对定位的。它相对于它的父元素定位。

        </div>

    </div>

    <div class="fixed">

        一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，<br />

        这意味着即便页面滚动，它还是会停留在相同的位置。<br />

        和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。<br />

        一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

    </div>

</body>

</html>

接下来看一下属性解释：

static

static 是默认值。

任意 position: static; 的元素不会被特殊的定位。

一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。

其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

和 relative 一样， top 、 right 、 bottom和 left 属性都可用。

一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

absolute

absolute 是最棘手的position值。

absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。

如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，

那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

记住一个“positioned”元素是指 position 值不是 static的元素。

原文地址： http://zh.learnlayout.com/position.html

学习CSS布局 - position的更多相关文章

  1. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  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. 百度网盘满速下载器：pandownload

    http://pandownload.com/index.html 作者提示:1.软件使用 C++ 编写2.大文件需要等待一段时间才会有下载速度3.文件名含有特殊字符可能会下载出错,请重命名再下载4. ...

  2. php soapclient 超时 设置

    用php的soapclient,默认是60秒.可在php.ini里配置, 重启APache 或者在PHP代码里做设置 ini_set('default_socket_timeout', 300);// ...

  3. 【代码笔记】Web-ionic-头部与底部

    index代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. [VUE ERROR] Invalid prop: type check failed for prop "list". Expected Array, got Undefined

    错误原因: 子组件 props -> list 要求接收的数据类型是 Array, 然而实际接收到的是 Undefined. 子组件代码: props: { list: { type: Arra ...

  5. 在Centos下面FTP映射方案

    前两天公司要在一台Centos的机子上,把一些文件定时备份到另外一台ftp服务器上, 在Linux系统中,mount是不支持直接挂在"ftp://192.168.1.1/backup&quo ...

  6. 13.1、多进程：进程锁Lock、信号量、事件

    进程锁: 为什么要有进程锁:假如现在有一台打印机,qq要使用打印机,word文档也要使用打印机,如果没有使用进程锁,可能会导致一些问题,比如QQ的任务打印到一半,Word插进来,于是打印出来的结果是各 ...

  7. [20171124]xxd与通配符.txt

    [20171124]xxd与通配符.txt --//linux 上许多命令都支持通配符,比如$ ls -l *.txt-rw-r--r-- 1 oracle oinstall 44801024 201 ...

  8. 洗礼灵魂，修炼python（55）--爬虫篇—知识补充—RFC 2616 http状态码

    不多说直接上状态码表: 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽 ...

  9. Dota 2 中安装包的作用

    在玩data 2 的时候有很多其他安装包的下载,那这些有啥用呢? Reborn是Dota2的重生客户端,也就是主客户端. Opengl是显卡优化的,应该是微软的一个标准,有助于提高游戏的 FPS. V ...

  10. PHP实现一个简陋的注册登录页面

    PHP实现一个简陋的注册登录页面 今天来水一篇没有**用的 /滑稽脸,代码简陋臃肿考虑不全,各位大佬轻喷,还望不吝赐教. 首先考虑了一下需要至少四个页面:register.html.register. ...