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. React 入门学习笔记整理（九）——路由

    (1)安装路由 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api. Re ...

  2. 02--css背景与边框--css揭秘

    背景与边框 一 半透明边框 rgba/hsla颜色 1.难题 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来.我们最开始的尝试可能是这样的: #bo ...

  3. 【Java入门提高篇】Day33 Java容器类详解（十五）PriorityQueue详解

    今天要介绍的是基础容器类(为了与并发容器类区分开来而命名的名字)中的另一个成员——PriorityQueue,它的大名叫做优先级队列,想必即使没有用过也该有所耳闻吧,什么?没..没听过?emmm... ...

  4. 【Java入门提高篇】Day21 Java容器类详解（四）ArrayList源码分析

    今天要介绍的是List接口中最常用的实现类——ArrayList,本篇的源码分析基于JDK8,如果有不一致的地方,可先切换到JDK8后再进行操作. 本篇的内容主要包括这几块: 1.源码结构介绍 2.源 ...

  5. python与MongoDB的基本交互：pymongo

    本文内容: pymongo的使用: 安装模块 导入模块 连接mongod 获取\切换数据库 选择集合 CRUD操作 首发时间:2018-03-18 20:11 pymongo的使用: 安装模块: pi ...

  6. [20171205]uniq命令的输入输出.txt

    [20171205]uniq命令的输入输出.txt --//前几天遇到XXD与通配符问题,链接http://blog.itpub.net/267265/viewspace-2147702/--//今天 ...

  7. Windows 10 执行pip list报错 UnicodeDecodeError: 'gbk' codec can't decode

    在命令行执行任何pip命令都报错: C:\Users\hyang0>pip --version Traceback (most recent call last): File "c:\ ...

  8. sql server2014企业版无人值守批处理脚本自动化安装

    ▲版权声明:本文为博主原创文章,未经博主允许不得转载. SQL Server系列软件是Microsoft 公司推出的关系型数据库管理系统.2014年4月16日于旧金山召开的一场发布会上,微软CEO萨蒂 ...

  9. 在pycharm中每次运行代码不使用console而使用run

    问题:在pycharm中点击run运行程序,发现没有打开run窗口,而是打开的Python console窗口. 解决方法:打开菜单栏run->edit configurations,把下图中的 ...

  10. 【Beta Scrum】冲刺！ 1/5

    0. Alpha阶段遗留问题 项目 功能/页面 功能/页面 WEB端 图片在线编辑 文件上传跨域问题 app端 作业展示页面 1. Beta计划表 功能 说明 web端 登录 完成web端登录页面及功 ...