】把元素的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. 第六章、ajax方法以及序列化组件

    目录 第六章.ajax方法 一.choice参数介绍 二.MTV与MVC模型 三.ajax方法 四.案例 五.Ajax传json格式的数据 六. AJAX传文件 代码如下 ajax传文件需要注意的事项 ...

  2. 智能指针原理及实现（1）shared_ptr

    0.异常安全 C++没有内存回收机制,每次程序员new出来的对象需要手动delete,流程复杂时可能会漏掉delete,导致内存泄漏.于是C++引入智能指针,可用于动态资源管理,资源即对象的管理策略. ...

  3. Windows Phone惨遭微软放弃

    微软在电脑操作系统上的用户保有量一直处于遥遥领先的地位,特别是最新的Windows 10系统,一经推出,市场表现就比较好,但相比起来,微软的手机操作系统Windows Phone就被贴上“差等生”的标 ...

  4. Windows&Appium&Java&Python自动化测试-配置开发环境

    摘要 本篇博文,主要介绍借助Appium做移动端自动化测试的开发环境搭建,包括Java和Python Java环境:Appium+Maven+Idea+TestNG+Reportng Python环境 ...

  5. 03—mybatis的基本用法02

    深入Mapper XML映射文件 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比 ...

  6. initramfs机制

    1．什么是 Initramfs 在2.6版本的linux内核中,都包含一个压缩过的cpio格式的打包文件.当内核启动时,会从这个打包文件中导出文件到内核的rootfs文件系统,然后内核检查rootfs ...

  7. Java中的集合Collections工具类(六)

    操作集合的工具类Collections Java提供了一个操作Set.List和Map等集合的工具类:Collections,该工具类里提供了大量方法对集合元素进行排序.查询和修改等操作,还提供了将集 ...

  8. 解决从其他地方拷贝过来的Android项目在本机不能运行（报错）的问题

    这个问题一般是由gradle版本不同引起的.要解决可以这样: 一.在确保本机Android studio 正常使用的情况下,在本机新建一个Android项目 二.在文件夹中打开新建的Android项目 ...

  9. 【方法】如何实现图片压缩并使用FormData上传

    在前端上传图片的操作过程中,当上传服务器时,如果图片过大,可能会影响页面响应速度,这个时候,我们便会对图片进行压缩处理,再上传服务器. 前端对图片进行压缩,一般使用canvas来实现.最后使用canv ...

  10. kubernetes 存储volume，pv和pvc的使用

    emptyDIR 临时目录 hostPath :使用主机的路径 网络存储: 传统的设备存储:NAS,SAN 分布式存储:glusterfs,rbd,cephfs 云存储:EBS,Azure,阿里云的 ...