div里的position定位也是比较常见的，relative是相对定位，absolute是绝对定位。
如本文测试：
body自带8px的margin，这里不对其进行清空。
蓝色的div和红色的div分别设置两种定位方式，都是top值10px。
测试结果：
蓝色div(relative):18px，相对于body向下的了10px，body自身带着上margin是8px，所以相对于浏览器上方是10+8px。相对位置受外面的内容的margin的影响。
红色div(absolute）：10px，相对于浏览器向下了10px,相对于body向下了2px，直接对浏览器定位 ，不受外面的内容的margin影响。

如果有其他div和元素，absolute绝对定位 也不会受影响。
relative也会相对于外面的那个元素，受这个元素的位置的影响，在该元素的位置基础上偏移。
测试前面有其他元素：div定位relative和absolute测试2、

测试代码：

 <style>

  #blue_div{position:relative;top:10px;}

  #red_div{position:absolute;top:10px;}

  </style>

 </head>

 <body>

   <div id="blue_div" style="width:200px;height:200px;background:blue;text-align:center;">

   blue<br>

  </div>

  <div id="red_div" style="width:50px;height:50px;background:red;">

  red<br><a href="javascript:F1()">点击</a>

  </div>

<script>

function F1(){

    var blue_div=document.getElementById("blue_div");

    var red_div=document.getElementById("red_div");

    console.log("body自带8px的margin");

    console.log("blue_div(relative)的offsetTop"+blue_div.offsetTop);

    console.log("ted_div(absolute)的offsetTop"+red_div.offsetTop);

};

</script>

图示：

div定位relative和absolute测试1的更多相关文章

  1. div定位relative和absolute测试2

    之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...

  2. div定位relative和absolute和float测试3

    position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了 ...

  3. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  4. CSS 定位 relative && absolute 问题？

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  5. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

  6. relative 和 absolute 定位关系

    问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...

  7. display值的作用分别是什么？relative和absolute分别是相对谁定位的？

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

  8. ie10兼容问题 -- 将div定位absolute在图片img上面，导致div点击事件无效

    ie10兼容问题: 将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效. <div class="paper-box"& ...

  9. 前端~定位属性position（relative、absolute、fixed）的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

随机推荐

  1. Storm 安装时 部分supervisor启动成功，并不在web ui上显示

    今天帮公司搭建集群时,发现启动了三个Supervisor 发现只有一个显示在Web UI 上. 于是我就简单地检查了下另外两台没有启动的 storm supervisor的日志, 发现没有报出什么异常 ...

  2. BZOJ 2159: Crash 的文明世界 第二类斯特林数+树形dp

    这个题非常巧妙啊~ #include <bits/stdc++.h> #define M 170 #define N 50003 #define mod 10007 #define LL ...

  3. springboot 2.1.6发布

    最新消息: Spring Boot 2.1.6 昨天正式发布了,日常更新一些依赖和修复一些 BUG,没什么硬菜! 重点来了,Spring Boot 1.5 将于今年 8 月结束使命,请尽快迁移到 Sp ...

  4. saltstack 发布 iis 站点

    Saltstack 发布 iis 站点 saltstack 主服务器配置:切换到 salt 的主目录下 : 主目录示例:/home/salt 程序集放置目录: web/web1 sls 目录: web ...

  5. Linux中三种SCSI target的介绍之LIO

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/scaleqiao/article/deta ...

  6. 2017.10.4 国庆清北 D4T1 财富

    (其实这题是luogu P1901 发射站 原题,而且数据范围还比luogu小) 题目描述 LYK有n个小伙伴.每个小伙伴有一个身高hi. 这个游戏是这样的,LYK生活的环境是以身高为美的环境,因此在 ...

  7. 2017.10.5 国庆清北 D5T1 拼不出的数

    题目描述 3 个元素的集合{5,1,2}的所有子集的和分别是0,1,2,3,5,6,7,8.发现最小的不能由该集合子集拼出的数字是4. 现在给你一个n个元素的集合,问你最小的不能由该集合子集拼出的数字 ...

  8. 23、CacheManager原理剖析与源码分析

    一.图解 二.源码分析 ###org.apache.spark.rdd/RDD.scalal ###入口 final def iterator(split: Partition, context: T ...

  9. Windows 10操作系统中的邮件应用

    早期的邮件收发软件Outlook express曾被广泛使用,然而现在却很难下载到,在Windows 10操作系统中也无法使用. 实际上,Windows 10中存在“邮件”应用,可以直接作为邮件的收发 ...

  10. 【洛谷】P3177 [HAOI2015]树上染色

    懒得复制题面了直接传送门吧 分析 直接求点与点之间的距离感觉不是很好求,所以我们考虑换一个求法. 瞄了一眼题解 距离跟路径上边的长度有关,所以我们直接来看每一条边的贡献吧(这谁想得到啊) 对于每一条边 ...