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月 ...
随机推荐
- form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault
出错点:确认按钮上.加onclick事件.每次点击都会追加给form追加on监听方法.累加on方法,重复提交 suppress_exception:true 阻止异常 (百度推送 jdk) 向下按 p ...
- Java变量名命名规则
$ .字母.下划线开头都行,后面的可以是数字.字母.下划线: 匈牙利命名法.Camel命名法与Pascal命名法 匈牙利命名法:在Windows编程中使用非常普遍,由微软的一位匈牙利程序员提出.匈牙利 ...
- Entity Framework 学习中级篇4—存储过程(下)
在EF中,各个实体的插入.更新和删除也都通过使用存储过程来完成,以便提高点性能.这个类似于数据集.其步骤是:先定义存储过程,然后在VS的可视化设计器,设置存储过程映射即可. 下面,以为Supplier ...
- Inno Setup入门（六）——在程序目录下创建文件
创建文件夹可以使用[dirs]段实现,代码如下: [setup] ;全局设置,本段必须 AppName=Test AppVerName=TEST DefaultDirName="E:\TES ...
- beagleboneblack HDMI不能显示
beagleboneblack 接上HDMI到电视上,没有显示画面 看了资料之后才知道 http://elinux.org/Beagleboard:BeagleBoneBlack_HDMI#Conn ...
- actor
_timcharper1月 20 02:18 @timcharper , so what app the actor model can help, and what app the thread m ...
- 使用VS软件打开网站在浏览器浏览的方法
1.用VS软件打开网站之后,先检查网站是否使用IIS Express开发 2.若不是,则切换成使用IIS Express开发 3.检查项目使用的托管管道模式设置为经典模式了没有 4.最后选择“在浏览器 ...
- 直接用request.setAttribute()会报错，在这之前应该先让request获取ServletActionContext.getRequest();方法 // request.getAttribute同理
正确流程应该是 import javax.servlet.http.HttpServletRequest; HttpServletRequst request = ServletActionConte ...
- Hibernate 系列教程15-一级缓存
Product public class Product { private Long id; private String name; Product.hbm.xml <class name= ...
- CodeForces 567B Berland National Library hdu-5477 A Sweet Journey
这类题一个操作增加多少,一个操作减少多少,求最少刚开始为多少,在中途不会出现负值,模拟一遍,用一个数记下最大的即可 #include<cstdio> #include<cstring ...