div定位relative和absolute测试2
之前的博文: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的更多相关文章
- div定位relative和absolute测试1
div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...
- div定位relative和absolute和float测试3
position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了 ...
- CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- CSS 定位 relative && absolute 问题？
1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...
- div和span、relative和absolute、display和visibility的区别
一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...
- relative 和 absolute 定位关系
问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative 相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...
- display值的作用分别是什么？relative和absolute分别是相对谁定位的？
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- ie10兼容问题 -- 将div定位absolute在图片img上面，导致div点击事件无效
ie10兼容问题: 将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效. <div class="paper-box"& ...
- 前端~定位属性position（relative、absolute、fixed）的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
随机推荐
- 学习Spring-Data-Jpa(五)---可嵌入对象和元素集合的使用
1.场景一:地址信息(省.市.县.详细地址)在很多实体中都需要,比如说作者有地址,订单也有地址,但是他们的地址并不能独立与他们存在,所以地址不能映射为实体,那么我们就需要在作者实体和订单实体中都添加这 ...
- identifier of an instance of com.xxx.model.system.xxxObject was altered from 1765 to 1766
Caused by: org.hibernate.HibernateException: identifier of an instance of com.xxx.model.system.xxxOb ...
- word写博客
虽然很多博客已经可以直接粘贴图片了但是如果图片比较多的话还是会很麻烦的.如果文章中只有一张图片那还好说,直接使用CSDN提供的编辑器粘贴就完了.但是我们的文档中一般图片都是多于1张的,经常是10张.如 ...
- cube.js 学习（六）cube.js segments 说明
segments 是你需要查询的数据的子集,实际上filter 也可以做类似的事情,但是,目前这个设计估计是为了更好的数据 查询吧,同时在操作界面上我们也可以看出来 参考格式 segments: { ...
- PHP实现系统编程（一） --- 网络Socket及IO多路复用【网摘】
一直以来,PHP很少用于socket编程,毕竟是一门脚本语言,效率会成为很大的瓶颈,但是不能说PHP就无法用于socket编程,也不能说PHP的socket编程性能就有多么的低,例如知名的一款PHP ...
- lixuxmint系统定制与配置（3）-字体
小书匠Linux 有些系统自带的字体实在太难看了,看起来不清晰,不明确,有一个好的字体,可以带来好心情,并提高工作与效率. 1.常用中文字体 文泉驿微黑,微软雅黑,思源黑体 2.字体安装 2.1检查已 ...
- 内核中通过进程PID获取进程的全部路径
目录 一丶简介 二丶原理 1.原理 2.代码实现. 一丶简介 我们遇到的Dos路径.如果想转化为NT路径(也就是 C:\xxxx)类似的格式 需要自己实现. 具体原理如下: 二丶原理 1.原理 1.使 ...
- C Primer Plus--结构和其他数据类型(1)
目录 结构变量 structure variable 建立结构声明 定义结构声明 结构数组 嵌套结构 结构指针 使用指针访问结构成员 结构用于传参 在结构中使用指针的危害 联合(Union)数据结构 ...
- FCS省选模拟赛 Day5
传送门 Solution Code #include<bits/stdc++.h> #define ll long long #define max(a,b) ((a)>(b)?( ...
- sturts标签中
struts中的s标签中textfield和textarea中不需要加上value和中间值,通过name可以直接取到. textfield和textarea标签没有value属性,需要加上${ylqx ...