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月 ...
随机推荐
- servlet第2讲(下集)----创建servlet实例（继承HttpServlet）
- App Store 升级问题
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...
- 缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout
弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...
- byte数组如何转为short数组 (转)
最近在搞毕业设计,做的是有关语音识别的手机应用.在处理音频的过程中,发现需要用short数组处理音频,可能光用byte会越界.但是java读文件没有一次性读到short数组中的api,要么是一个一个读 ...
- Oracle 锁
select for update对某行加锁之后: select语句可以执行: select for update 这行不可以: 会一直等待锁释放 select for update wait 3 ...
- idea编译报错:未结束的字符串文字;非法的表达式;未结束的字符串字面值
在idea的Settings中,找到File Encodings,将IDE Encoding 改为UTF-8 要多试几次,清除缓存什么的,具体原因不知道,不过经常第一次修改不能成功.
- selenium2(WebDriver) API
selenium2(WebDriver) API 作者:Glen.He出处:http://www.cnblogs.com/puresoul/ 1.1 下载selenium2.0的包 官方downl ...
- Ugly Problem
Ugly Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Spec ...
- OpenGL------在Windows系统中显示文字
增加了两个文件,showline.c, showtext.c.分别为第二个和第三个示例程序的main函数相关部分.在ctbuf.h和textarea.h最开头部分增加了一句#include <s ...
- Android:TextView最小行数设置
我们有时候为了保证TextView必须有一个最小的高度,那么就需要设置这个行数. 因为如果你不设置的话,在measure这个TextView的时候,此时就无法准确的得到一个最小高度.因为设备不同,所以 ...