】把元素的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. fnmatch：Unix式glob模式匹配，简单场景下可以代替正则

    介绍 fnmatch模块用于根据glob模式(如Unix shell所使用的的模式)比较文件名 简单匹配 import fnmatch ''' fnmatch将一个文件名与一个模式进行比较,并返回一个 ...

  2. SQL SERVER 常用函数 学习笔记

    1.字符串截取.字符串转数字 --Server.8.30 select SUBSTRING('SqlServer_2008',4,6) as DB, CONVERT(float,SUBSTRING(' ...

  3. troubshooting-sqoop 导出 TiDB表数据报com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    2019-11-22 17:15:27,705 FATAL [IPC Server handler 13 on 44844] org.apache.hadoop.mapred.TaskAttemptL ...

  4. C - Calculation 2 HDU - 3501 （欧拉）

    Given a positive integer N, your task is to calculate the sum of the positive integers less than N w ...

  5. Launcher类源码分析

    基于上一次获取系统类加载器这块进行分析: 关于这个方法的javadoc在之前已经阅读过了,不过这里再来仔细阅读一下加深印象: 这里有一个非常重要的概念:上下文类加载器: 它的作用非常之大,在后面会详细 ...

  6. SQL 归纳

    查询父节点的所有子节点: SELECT * FROM menu m START WITH m.ID_ = '402882836068695f0160688eebf70006' CONNECT BY m ...

  7. 使用WebSocket实现简单的在线聊天室

    前言:我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列,发现大佬们写得太高深了 我这种新手看不懂,所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq ) 话不多说,直接 ...

  8. SDL 小例子

    以下利用SDL播放网络流,需要自己配置运行环境,包括SDL和FFmpeg // ConsoleApplication2.cpp : 定义控制台应用程序的入口点. // /* #include &quo ...

  9. BZOJ 2982 combination 脑子+组合数学

    可以发现,整个数列构成一个树形结构,并且是个完全二叉堆(小根堆). 并且这个堆的形态在给定$n$后是固定的,第1个位置上显然只能放1. 对子树的根来说,他自己是所分得的数集中最小的那个,所以从剩下$s ...

  10. PHP mysqli_fetch_assoc() 函数

    从结果集中取得一行作为关联数组: <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect("localhost& ...