div定位relative和absolute测试1
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的更多相关文章
- div定位relative和absolute测试2
之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...
- 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 ...
随机推荐
- learning java BigDecimal类
使用BiDecimal类是了为防止运算时精度丢失: var f1 = new BigDecimal("0.05"); var f2 = BigDecimal.valueOf(0.0 ...
- learning java Objects.requireNonNull 当传入参数为null时，该方法返回参数本身
System.out.println(Objects.hashCode(obj)); System.out.println(Objects.toString(obj)); System.out.pri ...
- 99: AGC-018C 堆+思维
$des$有 $X + Y + Z$ 个人,第 $i$ 个人有 $A_i$ 个金币,$B_i$ 个银币,$C_i$ 个铜币.选出 $X$ 个人获得其金币,选出 $Y$ 个人获得其银币,选出 $Z$ 个 ...
- 题解 UVA11105 【H-半素数 Semi-prime H-numbers】
做这道题之前首先要掌握的是线性筛的模板 附上题目链接 https://www.luogu.org/problem/P3383 首先这道题目的范围有些特殊必须是% 4 == 1的数才行 所以可以这样 直 ...
- IntelliJ IDEA 2017 Dubbo Elastic-job Redis Zookeeper RabbitMQ FastDFS MyCat 简介以及部分实现(三)
前言 首先需要说明一下,与前两章的安装篇不太一样,这篇主要扫清一下这些插件/框架 等都是干什么用的,大多数都会用于服务端或监测工具或其他,作为新手建立一个大概的思想更好的了解自己的项目.废话不多 ...
- 32、reduceByKey和groupByKey对比
一.groupByKey 1.图解 val counts = pairs.groupByKey().map(wordCounts => (wordCounts._1, wordCounts._2 ...
- pve 导入 ova
匆忙记录 Proxmox includes qm importdisk as command. Extract your ova: tar -xvf *.ova Create a new VM wit ...
- Lombok：小辣椒的安装与使用
0.简介 Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具, 通过使用对应的注解,可以在编译源码的时候生成对应的方法,官网有详细的使用说明和视频. ...
- hbase 在线修复集群命令
前提:HDFS fsck确保hbase根目录下文件没有损坏丢失,如果有,则先进行corrupt block移除. 切记:一定要在所有Region都上线之后再修复,否则修复之后可能出现重复Region. ...
- 0915 N校联考
树上路径(phantasm) 题目背景 Akari是一个普通的初中生. 题目描述 Akari的学校的校门前生长着一排n棵树,从西向东依次编号为1∼n.相邻两棵树间的距离都是1.Akari上课的教学楼恰 ...