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月 ...
随机推荐
- angular 搜索记录保留
#方法1: 点击后退到home后,再点击搜索, locationChangeStart 事件会多次触发. # $scope.keyword = $location.search().search # ...
- 【我与一道水题的抗争之路】 哈理工2323 Emirp（反素数）
题目: http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=2323 1,打表的姿势不对. ...
- 缩放系列（一）：一个很好的bitmap手势缩放demo（多点触控）
认识事物都遵循由简入繁的顺序,下面我们想实现一个控件或者一个布局的缩放,先从简单的例子开始吧,我们就以缩放图片做入门. 效果图: 一.要求 利用ScaleGestureDetector这个类实现图片缩 ...
- linux脚本定期执行
vi /etc/crontab SHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root HOME=/ # .----------- ...
- watch命令
watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行.在Linux下,watch是周期性的执行下个 ...
- 关于项目刚才还能运行的，重启Myeclipse就不能运行(报错)的解决方法
这个是以为内存不足引起的,就是打开MyEclipse的时候,因为内存不足,没有加载完整的项目,这个时候需要重启电脑,即可解决问题.
- Hibernate 系列教程11-继承-Single Table策略
Single Table策略 通过 discriminator鉴别器来区分是父类还是子类 Employee public class Employee { private Long id; priva ...
- php fsockopen
1.PHP fsockopen函数说明: Open Internet or Unix domain socket connection(打开套接字链接) Initiates a socket conn ...
- [转]Android之Context和Activity互相转换
1.context转换为activity Activity activity = (Activity) context; 2.从activity得到context 在activity的方法中用cont ...
- Java 堆内存(Heap)[转]
将jvm内存很不错的文章,转自 堆(Heap)又被称为:优先队列(Priority Queue),是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复 ...