】把元素的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. 【Struts2】文件上传与下载

    一.上传 1.1 Struts2实现步骤 浏览器端 服务器端 1.2 关于Struts2中文件上传细节: 1.3 示例 jsp文件 Action类 struts.xml文件配置 二.下载 2.1 文件 ...

  2. 【loj#2524】【bzoj5303】 [Haoi2018]反色游戏（圆方树）

    题目传送门:loj bzoj 题意中的游戏方案可以转化为一个异或方程组的解,将边作为变量,点作为方程,因此若方程有解,方程的解的方案数就是2的自由元个数次方.我们观察一下方程,就可以发现自由元数量=边 ...

  3. aop 的一些表达式

    切入点的表达式 execution(void cn.itcast.e_xml.a_before.UserServiceImpl.saveUser(java.lang.String,java.lang. ...

  4. python之命令行可以做的事儿

    前言 说起python,大家都知道可以做很多有趣的事儿.知乎.CSDN上很多大牛做过很多或高大上或实用的事儿.参见这篇文章Python趣味代码整合之提升学生编程兴趣, 另外,我发现命令行也可以做很多事 ...

  5. Pycharm Community 配置 Django 开发环境

    1. 安装数据库可视化工具 Database Navigator 2. 括号匹配高亮工具 HighlightBracketPair (...) Web 开发放弃 Pycharm Community 版 ...

  6. sessionStorage 与 localStorage 重新认识？

    之前写过一次关于 js存储的总结,但是今天在项目中遇到一个bug让我重新在认识 sessionStorage 与 localStorage.以下的介绍都是基于同源下进行的,仔细看下面的案例: a.ht ...

  7. centos wireshark

    root安装: yum install wireshark yum install wireshark-gnome wireshark error: There are no interfaces o ...

  8. ActiveMQ初步安装使用(一)

    ActiveMQ 的官网 : http://activemq.apache.org ActiveMQ 扩展出: API 接受发送 MQ 的高可用 MQ 的集群容错配置 MQ 的持久化 延时发送 签收机 ...

  9. Load store and memoryless

    metal https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/MTLBestPractice ...

  10. WINCE7 SYMBOL MC32N0 SDK，VS2008调试程序，连接设备时，出现bootstrap 未能加载时

    开发工具:visual studio 2008 手持设备: SYMBOL  MC32NO工具->连接到设备->WINCE 7.00连接设备出现bootstrap 未能加载时,试下安装Mot ...