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. 【读书笔记】iOS-属性

    assign:简单的赋值. retain:赋值之后,会调用新的retain方法和旧值的release方法. copy:表示先将值拷贝一份,然后,将这个拷贝赋值给实例变量,这个修饰词只适用于实现了NSC ...

  2. Element隐藏组件：scrollbar

    scrollbar是用来替代浏览器原生滚动条的组件,element的文档中并没有对scrollbar的描述. 使用方法:以<el-scrollbar/>包裹要滚动的元素,并设置固定高度.在 ...

  3. 为什么 APM 能提升 IT 团队工作质量？

    “有必要吗?”这是很多 IT 专业人员在尝试向团队内部推荐应用程序性能管理价值时所面临的问题.APM(应用程序性能管理)能为公司节约成本,提高内部工作效率,并真实了解用户对公司的系统和产品是否满意.除 ...

  4. 前端测试框架jest 简介

    转自: https://www.cnblogs.com/Wolfmanlq/p/8012847.html 作者:Ken Wang 出处:http://www.cnblogs.com/Wolfmanlq ...

  5. 【转】解决weblogic启动慢和创建域慢的方法

    创建域慢启动慢的特征:创建域到70%时,进程长时间等待(命令行创建时停止在100%处),创建域启动Weblogic的时候也是长时间停止. Weblogic在Linux下启动慢的原因,发现从进程堆来看, ...

  6. SQL Server ltrim(rtrim()) 去不掉空格

    原因:中间存在回车符或者换行符,所以要先将此符号替换掉: LTRIM(RTRIM(REPLACE(REPLACE( A,char(13),''),char(10),'') )) LTRIM(A) -- ...

  7. CTR预估中GBDT与LR融合方案

    1. 背景 CTR预估(Click-Through Rate Prediction)是互联网计算广告中的关键环节,预估准确性直接影响公司广告收入.CTR预估中用的最多的模型是LR(Logistic R ...

  8. tkinter学习系列（二）之窗口的设置

    目录 (一)窗体的最小框架 1.说明: 2.源代码: 3.实现效果: (二)窗体的基本设置 1.说明: 2.完整代码: 3.实现效果: (三)窗体的外形设置 1.说明: 2.完整代码: 3.实现效果: ...

  9. OSPF单区域配置

    OSPF单区域配置 实验环境:华为模拟器eNSP 现在有这样一个拓扑图: 我想要让R1可以ping通R3,显然目前是不行的: <R1>ping 192.168.2.2 PING 192.1 ...

  10. python五十六课——正则表达式（常用函数之findall）

    4).函数:findall(regex,string,[flags=0]): 参数: 和match.search一样理解 功能: 将所有匹配成功的子数据(子串),以列表的形式返回: 如果一个都没有匹配 ...