CSS中绝对定位依据谁进行定位？
结论
绝对定位的top等的依据元素需满足3个条件：
- 已定位(position:relative/fixed/absolute)
- 最近的
- 祖辈元素(一定是祖辈元素不是同辈元素)
说明
- 一般会为body设置position:relative此属性，方便定位。
- 绝对定位的position的top/left等一定不是根据同辈元素来的。
Demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 规定字符集的编码为utf-8 -->
<meta charset="utf-8"> <style type="text/css">
body {
position: relative;
padding: 0px;
height: 500px;
} #Outer{
position: fixed;
border: 1px solid black;
width: 300px;
height: 300px;
top: 50px;
} #Red {
width: 200px;
height: 80px;
border: 1px solid red;
position: relative;
/*margin-top: 10px;*/
top: 20px;
} #Green {
position: absolute;
width: 200px;
height: 80px;
border: 1px solid yellowgreen;
top: 30px;
} #Outer2{
width: 100px;
height: 100px;
background: yellowgreen;
}
</style>
</head> <body>
<div id="Outer">
<div id="Red">Red</div>
<div id="Green">Green</div>
</div>
<div id="Outer2"> </div>
</body> </html>
结果如图：
可以看出
- position:absolute 绿色div是根据 父级元素黑色的div 进行定位的。
- position:relative 红色的div是根据原有位置进行定位的。
PS
- 定位的时候，对于未脱离文档流的元素，是根据原有位置进行定位的。
- 定位的时候，对于已脱离文档流的元素，是根据最近的已定位的祖辈元素进行定位的。
CSS中绝对定位依据谁进行定位？的更多相关文章
- css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
- cordova 导致css中绝对定位top:0会被顶到视图之外
IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...
- CSS系列：CSS中盒子的浮动与定位
1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...
- CSS中position的4种定位详解
大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...
- table中绝对定位元素相对td定位失效解决方案
开门见山! 问题:在一个table中,我需要在td里面绝对定位一个div, 写法:td{position:relative;} div{position:absolute;} OK,就这么简单,思路也 ...
- css中绝对定位和相对定位的区别
先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
- css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
- 深入学习CSS中如何使用定位
CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
随机推荐
- hdu_4507_吉哥系列故事——恨7不成妻(鬼畜数位DP)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4507 题意:中文,不解释,注意的是求的是合法数字的平方和,即(a+b+c+……)^2 题解:数位DP, ...
- flex、As 3.0 小知识
<s:CheckBox id="checkBox" x="10" y="5" label="{new ObjectProx ...
- JPA 系列教程2-单表操作
JPA Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关系映射工具来管理Java应用中的关系数据.他的出现主要是为了简化现有的持久化开发工作和整合ORM技术,结束现在Hibe ...
- CodeForces 429B Working out 动态规划
Description Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to loo ...
- UVA 1400 线段树
input n m 1<=n,m<=500000 a1 a2 ... an |ai|<=1e9 m行查询 每行一对a b output 对于每对a b输出区间[a,b]中最小连续和x ...
- linux的学习系列 5--环境变量
在Linux中,环境变量是一个很重要的概念.环境变量可以由系统.用户.Shell以及其他程序来设定. 变量就是一个可以被赋值的字符串,赋值范围包括数字.文本.文件名.设备以及其他类型的数据. 下面的例 ...
- iOS屏幕旋转 浅析
一.两种orientation 了解屏幕旋转首先需要区分两种orientation 1.device orientation 设备的物理方向,由类型UIDeviceOrientation表示,当前设备 ...
- JavaScript（2）——对象属性、原型与原型链
对象属性.原型与原型链 哈哈哈,我的第二篇博客哟,说的是对象属性.原型与原型链.可能这些只是某些小点串联起来的,逻辑性没有很强.所以会对文章的可读性和理解性带来一些困扰.不过,今天我又前进了那么一小步 ...
- Hibernate一级缓存和二级缓存深度比较
1.什么是缓存 缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据, ...
- Roboguice学习之视图注入
Robuguide的使用 准备工作: 首先在项目中必须实现GreetingModule和RoboguiceDemoApplication GreetingModule.java import com. ...