】把元素的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. vue 之img的src是动态渲染时(即 :src=' ' )不显示 踩坑

    问题: <img :src="item.image ? `../../assets/image/${item.image}` : ''" alt="image&qu ...

  2. OpenCV入门学习资料汇总

    OpenCV学习文档资料 OpenCV学习:1)OpenCV中文网站——http://wiki.opencv.org.cn/index.php/%E9%A6%96%E9%A1%B5 2)python实 ...

  3. Django—model系统：ORM对数据库操作

    基本操作 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <3> get(**kwargs): ...

  4. 嵌入式Linux应用开发完全手册读书笔记——交叉编译工具选项说明

    交叉编译工具选项说明 arm-linux-gcc 一个c/c++文件要变成可执行文件需要4步:预处理 -> 编译 -> 汇编 -> 链接: 在使用arm-linux-gcc时的常用选 ...

  5. 说一下 HashMap 的实现原理？（未完成）

    说一下 HashMap 的实现原理?(未完成)

  6. CSP2019 退役记

    本来想写"退役在即"的,考完 Day2 后直接改成"退役记"了 Day 0 在 ssf 的机房里继续变弱,自己写了一遍 splay 板子,居然写对了,开心 非常 ...

  7. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  8. Neo4j入门博客分享

    Neo4j学习参考博客:https://www.cnblogs.com/ljhdo/p/5516793.html Neo4j Cypher查询语言详解 http://www.ttlsa.com/nos ...

  9. C# WebBrowser使用 网络(二)

    WebBrowser 简单操作 Form 代码 public partial class Form1 : Form { public Form1() { InitializeComponent(); ...

  10. BZOJ 4260: Codechef REBXOR (trie树维护异或最大值)

    题意 分析 将区间异或和转化为前缀异或和.那么[L,R][L,R][L,R]的异或和就等于presum[R] xor presum[L−1]presum[R]\ xor \ presum[L-1]pr ...