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 ...
随机推荐
- LightOJ - 1095 - Arrange the Numbers（错排）
链接: https://vjudge.net/problem/LightOJ-1095 题意: Consider this sequence {1, 2, 3 ... N}, as an initia ...
- nginx 超时配置、根据域名、端口、链接 配置不同跳转
Location正则表达式location的作用 location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作. locatio ...
- js之大文件断点续传
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- 2019.11.15 JQ图片轮播
<div class="three"> <div class="bjtp"> <img class="bjpic b1& ...
- PHP操作数据库（以MySQL为例）
一.开启扩展配置: 在php.ini的extension板块中增加一行extension=php_mysqli.dll 重启PHP,在phpinfo查看 <?php echo phpinfo() ...
- Luogu4294 【WC2008】游览计划
斯坦纳树(我也不知道为什么叫这个名字)是一种状压dp的套路,求在无向带花连通图中,选取边使一些特殊点连通起来的最小花费. 具体到这题就是这样的,设\(f_{u,S}\)表示当前根是\(u\),与它连通 ...
- mysql存储html代码之导出后无法导入问题
我用mysql的text类型存储了一些html代码,然后用navicat for mysql导出,然后再次导入的时候,就死活导不进去. mysql提示的错误是:this saves the data ...
- SVN版本回滚实战
天在使用SVN发布的时候不小心修改了一些不正确的东西,新增和编辑了一些错误的文件,由于文件数量比较多,并且目录复杂,不可能单个进行处理,所以想到了SVN版本回滚. 回滚本地工作目录: 1.右键工作目录 ...
- 44个Java性能优化
44个Java性能优化 首先,代码优化的目标是: 减小代码的体积 提高代码运行效率 代码优化细节 1 .尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心AP ...
- scala_基础
笔记前言:本笔记为scala的入门基础和scala基础使用.主要参考为书籍和推荐较高的博客.主要目的为供个人总结学习. 所有来自网络参考内容不一一列出. 一.面向过程 1.变量体 val 标识符:声 ...