结论

绝对定位的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>

结果如图：

可以看出

  1. position:absolute 绿色div是根据 父级元素黑色的div 进行定位的。
  2. position:relative 红色的div是根据原有位置进行定位的。

PS

  • 定位的时候，对于未脱离文档流的元素，是根据原有位置进行定位的。
  • 定位的时候，对于已脱离文档流的元素，是根据最近的已定位的祖辈元素进行定位的。

CSS中绝对定位依据谁进行定位？的更多相关文章

  1. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  2. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  3. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

  4. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...

  5. table中绝对定位元素相对td定位失效解决方案

    开门见山! 问题:在一个table中,我需要在td里面绝对定位一个div, 写法:td{position:relative;} div{position:absolute;} OK,就这么简单,思路也 ...

  6. css中绝对定位和相对定位的区别

    先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...

  7. css中绝对定位和相对定位详解

    相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...

  8. 深入学习CSS中如何使用定位

    CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...

  9. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

随机推荐

  1. nodejs package.json详细解读

    package.json详细内容 它是这样一个json文件(注意:json文件内是不能写注释的,复制下列内容请删除注释): JavaScript { "name": "t ...

  2. DLL调试方法

    1.已经做好的dll不能设置:你可以用AfxMessageBox把信息打印出来.2.哪个地方调用的函数 把DLL重新编译一次 在把DLL放到工程里 从新添加一下 然后在你工程调用DLL内容的地方设置断 ...

  3. 第3章 Java语言基础----声明成员变量，对变量进行赋值

    声明成员变量,对变量进行赋值的正确语句,如下图所示:

  4. knockout.js

    最近在使用knockout这个JS的MVVM模型,真的很不错,每次去查英文的文档,的确很累的,抽空的时候就把看到的文档按自己的理解翻译一下.当然我不是逐字的翻译. knockout的官方说明:http ...

  5. QQ 自动接收远程连接之关闭了远程桌面

    之前使用都好好的,后来就不知道怎么了突然就不行了,在另外一个远程桌面软件(向日葵)失效后,木有办法,查查查,终于查出来了,是我本机的时间服务停止了,导致我本机的时间和服务器时间不一致,所以连接不上.只 ...

  6. 线段树+dp+贪心 Codeforces Round #353 (Div. 2) E

    http://codeforces.com/contest/675/problem/E 题目大意:有n个车站,每个车站只能买一张票,这张票能从i+1到a[i].定义p[i][j]为从i到j所需要买的最 ...

  7. 获取sql执行时间

    sql server中获取要执行的sql或sql块的执行时间,方法之一如下: declare @begin datetime,@end datetime set @begin =getdate() - ...

  8. AutoTile 自动拼接（四） 学习与实践

    今天主要来说下,数据绑定. 之前第一章,我说到 把 资源图 画成格子,你们应该还有印象吧. 那么,当我 知道 格子数据,能否拿到 资源对应的图片呢? 大家先复习一下 第一章,发现很多格子数据 是相同的 ...

  9. 初探JavaScript魅力（五）

    JS简易日历    innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五' ...

  10. Bootstrap学习 - 全局CSS样式

    栅格Grid  <!-行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中-> <div class="c ...