定位上下文（补充css的position属性）
】把元素的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属性）的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 深入理解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 ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- 理解css之position属性
之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删 ...
- CSS中position属性 （absolute，relative，static，fixed）
只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...
随机推荐
- 【uoj#94】【集训队互测2015】胡策的统计（集合幂级数）
题目传送门:http://uoj.ac/problem/94 这是一道集合幂级数的入门题目.我们先考虑求出每个点集的连通生成子图个数,记为$g_S$,再记$h_S$为点集$S$的生成子图个数,容易发现 ...
- linux——常用命令
学习linux命令地址: 学习命令地址,可参考http://linux.51yip.com/ 在文件中搜索指定字符串 grep -i "requirepass" redis.con ...
- sql 拼接字符串单条拆分多条
SELECT * FROM ( SELECT A.WS_ID , B.NEXT_OPERATOR FROM ( SELECT WS_ID , [NEXT_OPERATOR] = CONVERT(XML ...
- 关于join() 是否会释放锁的一些思考
# 首先从一个很有意思的问题开始: - 问 : Thread 的join() 方法是否会释放锁? - 答: 会! # 如果一切到这里就结束了,那可能也就没有这篇小记了,但是我的脑子却冒出了一些奇怪的想 ...
- 在java的xml文件配置数据库URL地址时提示The reference to entity "characterEncoding" must end with the ';' delimiter.错误信息
配置数据库的URL<property name="url" value="jdbc:mysql://127.0.0.1:3306/micro_message&quo ...
- python_三元运算符
三元运算又称三目运算,是对简单的条件语句的简写 简单条件语句: if 条件成立: val = 1 else: val = 2 改成三元运算: val = 1 if 条件成立 else 2 举例: a ...
- BZOJ1791 [Ioi2008]Island 岛屿[基环树+单调队列优化DP]
基环树直径裸题. 首先基环树直径只可能有两种形式:每棵基环树中的环上挂着的树的直径,或者是挂在环上的两个树的最大深度根之间的距离之和. 所以,先对每个连通块跑一遍,把环上的点找出来,然后对环上每个点跑 ...
- Error creating bean with name 'documentationPluginsBootstrapper' defined in URL
启动报错 Error starting ApplicationContext. To display the auto-configuration report re-run your applica ...
- ERROR 1130 (HY000): Host '127.0.0.1' is not allowed to connect to this MySQL server
[root@zstedu mysql]# mysql --protocol=tcp -h 127.0.0.1 -uroot -pEnter password: ERROR 1130 (HY000): ...
- SpringDataJpa 分页查询
第一种方式 实体类 Student import javax.persistence.*; import java.io.Serializable; @Entity @Table(name=" ...