结论

绝对定位的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. Codeforce#354_B_Pyramid of Glasses(模拟)

    题目连接:http://codeforces.com/contest/676/problem/B 题意:给你一个N层的杯子堆成的金字塔,倒k个杯子的酒,问倒完后有多少个杯子的酒是满的 题解:由于数据不 ...

  2. World Cup

    World Cup Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Total Su ...

  3. Python 学习笔记2

    今天继续安装配置python. Fear can hold you prisoner. Hope can set you free.

  4. ios中的关键词@property @synthesize

    @interface Person : NSObject{    int myNumber;} @property(nonatomic) int myNumber;//这个关键字是可以带套get 与s ...

  5. 关于用模拟器运行百度地图API无法定位的问题 - 不能用模拟器

    模拟器是没有办法定位,当你加入定位模块的时候,传出的参数都是空的. 定位的这个方法函数,是通过回调接口来实现,而且触发该事件的时候,需要经纬度位置改变.官方文档写得很清楚,简单点来说,就是你没有GPS ...

  6. virtualenv 管理python 环境

    virualenvvirtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够:1. 在没有权限的情况下安装新套件2. 不同应用可以使用不同的套件版本3. 套件升级不 ...

  7. Redis如何保存数组和对象

    个人建议使用PHP自带的序列化函数serialize和unserialize函数 我们可以封装一个自己的Redis类 <?php class MyRedis{ private static $h ...

  8. MyBatis SQL配置文件中使用#{}取值为null时却不报错的解决方案。

    原因是因为#{kh_id} 这个参数名为小写,我之前写成了大写{#KH_ID}所以取不到值

  9. 几种JAVA加密算法

    转自:http://www.cnblogs.com/mycodelife/archive/2009/04/22/1441624.html

  10. 【stack】模拟网页浏览 poj 1028

    #include<stdio.h> #include<string.h> int main() { ][]; ]; int i,depth; strcpy(s[]," ...