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月 ...
随机推荐
- storm 使用过程中遇到的问题
1 bolt不停重启,excutor无法启动. nimbus日志类似如下(), 2014-03-12 10:55:06 b.s.d.nimbus [INFO] Executor MITAS3-74-1 ...
- 数据库连接池c3p0的设置
spring-hibernate.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...
- 高可用开源方案 Keepalived VS Heartbeat对比
最近因为项目需要,简单的试用了两款高可用开源方案:Keepalived和Heartbeat.两者都很流行,但差异还是很大的,现将试用过程中的感受以及相关知识点简单总结一下,供大家选择方案的时候参考. ...
- iOS开发：后台运行以及保持程序在后台长时间运行
第一部分 1.先说说iOS 应用程序5个状态: 停止运行-应用程序已经终止,或者还未启动. 不活动-应用程序处于前台但不再接收事件(例如,用户在app处于活动时锁住了设备). 活动-app处于“使用中 ...
- ubuntu 上下载PHP的源代码
参考: https://vpsineu.com/blog/how-to-build-and-install-php-5-6-9-from-source-on-ubuntu-14-04-vps/ 直接 ...
- 相对路径json无法获取
在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...
- 我为什么坚持DBA一定要懂开发
我为什么坚持DBA一定要懂开发时间 2016-03-23 15:34:08 张碧池的幸福生活原文 http://pottievil.com/我为什么坚持dba一定要懂开发/主题 DBA 数据库最近手头 ...
- C# 实现屏幕键盘 (ScreenKeyboard)
原文地址:http://www.cnblogs.com/youzai/archive/2008/05/19/1202732.html 要实现一个屏幕键盘,需要监听所有键盘事件,无论窗体是否被激活.因此 ...
- POJ 2368 巴什博奕
题目大意:给出n个按钮,每次最多可以按L个,按下最后一个按钮的人获胜.求使后手必定获胜的L的最小值(L>=2). 题目思路: 巴什博弈:只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少 ...
- linux的学习系列 3---目录
目录也是一个文件,它的唯一功能是用来保存文件及其相关信息.所有的文件,包括普通文件.设备文件和目录文件,都会被保存到目录中. 主目录 登录后,你所在的位置就是你的主目录(或登录目录),接下来你主要是在 ...