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

相对定位，不论是不是包含关系，都会受外部容器的影响。
绝对定位，只和浏览器有关 ，和其他没有影响。

如本文的测试中，红色div是相对浏览器定位，不受其他div影响。
绿色的是包裹了蓝色和红色的div，它有30px的margin-top，加上前面的黄色div的高度100px，绿色div距离浏览器顶部是130px，蓝色的相对绿色设置top10，距离绿色顶部10px，130+10=140px。

测试代码 ：

  <style>

  body{margin:0px;}

  #blue_red_divall{margin-top:30px;}

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

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

  </style>

 </head>

 <body>

    <div id="yellow_div" style="width:100px;height:100px;background:yellow;text-align:center;">

   yellow

  </div>

 <div id="blue_red_divall" style="width:400px;height:200px;background:green;">

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

      blue

      </div>

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

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

     </div>

</div>

<script>

function F1(){

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

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

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

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

 console.log("yellow_div的offsetTop:"+yellow_div.offsetTop);

 console.log("blue_red_divall的offsetTop:"+blue_red_divall.offsetTop);

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

 console.log("red_div的offsetTop:"+red_div.offsetTop);

};

</script>

图示：

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

  1. div定位relative和absolute测试1

    div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...

  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. LightOJ - 1102 - Problem Makes Problem（组合数）

    链接: https://vjudge.net/problem/LightOJ-1102 题意: As I am fond of making easier problems, I discovered ...

  2. UVA 11468 Substring (记忆化搜索 + AC自动鸡)

    传送门 题意: 给你K个模式串, 然后,再给你 n 个字符, 和它们出现的概率 p[ i ], 模式串肯定由给定的字符组成. 且所有字符,要么是数字,要么是大小写字母. 问你生成一个长度为L的串,不包 ...

  3. 洛谷 P1842 奶牛玩杂技 题解

    P1842 奶牛玩杂技 题目背景 Farmer John 养了N(1<=N<=50,000)头牛,她们已经按1~N依次编上了号.FJ所不知道的是,他的所有牛都梦想着从农场逃走,去参加马戏团 ...

  4. 【Python】安装MySQLdb模块centos 6.1 宝塔Linux面板 MySQL5.6

    [Python]安装MySQLdb模块centos 6.1 宝塔Linux面板 MySQL5.6 总之是各种坑 先说一下,宝塔安装在centos 6.1 i368 也就是32位系统上的方法 https ...

  5. Pytest权威教程02-Pytest 使用及调用方法

    目录 Pytest 使用及调用方法 使用python -m pytest调用pytest 可能出现的执行退出code 获取版本路径.命令行选项及环境变量相关帮助 第1(N)次失败后停止测试 指定及选择 ...

  6. 【模板】最小割树（Gomory-Hu Tree）

    传送门 Description 给定一个\(n\)个点\(m\)条边的无向连通图,多次询问两点之间的最小割 两点间的最小割是这样定义的:原图的每条边有一个割断它的代价,你需要用最小的代价使得这两个点不 ...

  7. vxlan和macvlan操作

    vxlan: 192.168.1.112 ———— 192.168.1.108 —— 192.168.1.109192.168.1.112配置:docker run -d -p 8500:8500 - ...

  8. [Linux] 启用win10下Linux子系统

    转载请注明出处:https://www.cnblogs.com/lialong1st/p/12004080.html 最新的win10引入了Linux子系统,这样就免去了安装虚拟机或者双系统的麻烦. ...

  9. css3自适应布局单位vw,vh

    css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...

  10. vue中样式被覆盖的问题

    在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们的 外部样式放的位置不对 main.js 我们应该在 main.js 的开头引入样式,这样的话就不存在覆 ...