】把元素的position属性设定为relative、absolute或fixed后，继而可以使用TRBL属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。

绝对定位元素的默认上下文是body。然而绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应的祖先元素的position设定为relative即可。

<body>

    <div id="outer">

        <div id="inner">这是一个测试文档，测试定位上下文，定位属性和属性操作</div>

    </div>

</body>
div#outer{width:250px; margin:50px 40px; border-top:3px solid red;}

div#inner{top:10px; left:20px; background:#ccc;}

显示结果如图：

代码里给内部div设定了top和left属性，但是内部div并没有相对外部div向下移动10像素，向右移动20像素。原因在于内外部div默认都是静态定位，它们之间不存在谁是谁的定位上下文这个问题。换句话说，在常规文档流中，由于外部div没有内容，内部div就会跟它共享相同的起点。只有将position属性设定为relative、absolute或fixed，这个元素的TRBL属性才会起作用。

这时给内部设定为绝对定位：

div#outer{width:250px; margin:50px 40px; border-top:3px solid red;}

div#inner{top:10px; left:20px; background:#ccc;position:absolute;}

这时效果如图

由于没有相对定位的祖先元素供其参照，内部div只能以默认的定位上下文body作为参照，相对于它定位。此时，内部div完全无视其父元素的存在，TL属性会相对于body元素向下、向左偏移其位置。

这时如果把外部div的position属性设定为relative。

div#outer{width:250px; margin:50px 40px; border-top:3px solid red;position:relative;}

div#inner{top:10px; left:20px; background:#ccc;position:absolute;}

绝对定位的上下文就变成了外部div，这时效果如下图所示：

定位上下文（补充css的position属性）的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  3. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  4. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  5. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  6. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  7. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. 理解css之position属性

    之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删 ...

  9. CSS中position属性 （absolute，relative，static，fixed）

    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...

随机推荐

  1. 八：MVC初始化数据库

    生成数据库策略: CreateDatabaseIfNotExists:方法会在没有数据库时创建一个,这是默认行为. DropCreateDatabaseIfModelChanges:如果我们在在模型改 ...

  2. MCU KEIL printf函数

    //加入以下代码,支持printf函数,而不需要选择use MicroLIB #if 1 #pragma import(__use_no_semihosting) //标准库需要的支持函数 struc ...

  3. 【cli命令集】

    1.调高bug等级 查看现在蜂窝目前sla情况 ROUTER> enable ROUTER# core set debug 18Core debug was 0 and is now 18Cor ...

  4. 5.caffe图片分类流程

    一次创建下列文件: 1,create_txt.sh (create_filelist.sh) 2,create_lmdb.sh 3,make_mean.sh 4,train.prototxt+val. ...

  5. centos7 nginx设置开启启动

    添加系统服务 在 /usr/lib/systemd/system 目录中添加 nginx.service,根据实际情况进行修改,详细解析可查看下方参考资料中的文章.内容如下 ?     [Unit] ...

  6. texture2dArray

    https://medium.com/@calebfaith/how-to-use-texture-arrays-in-unity-a830ae04c98b http://cdn.imgtec.com ...

  7. 浅谈script中的defer与async

    一直没有在script上使用过别的属性,今天看基础代码才发现这个,搜索.记录下,以便记忆. 大家都知道,js加载会造成阻塞,阻碍页面的继续渲染. defer: js与页面同步加载,不阻碍页面渲染,会在 ...

  8. 题解 [CF891C] Envy

    题面 解析 首先根据Kruskal算法, 我们可以知道, 在加入权值为\(w\)的边时, 权值小于\(w\)的边都已经加进树里了(除了连成环的). 所以,我们可以保存一下每条边的端点在加入生成树之前的 ...

  9. Huffman树、霍夫曼编码

    Huffman树指的是带权路径长度WPL最小的二叉树 WPL=路径*权值 Huffman常用于压缩编码,正常传输ABCDEF这些字母需要3位二进制树来描述,但由于一篇文章中ABCDEF这些字母出现的概 ...

  10. P1129 [ZJOI2007]矩阵游戏 二分图匹配

    思路:脑子+二分图匹配 提交:1次(课上讲过) 题解: 发现:如果符合题意,那么行和列一定是一一匹配的(必要条件),所以最大匹配必须是$n$. 同时我们发现,一定可以通过交换行列的方式,将(看起来)有 ...