div定位relative和absolute测试1
2023-09-27 14:20:04 时间
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>
图示:
相关文章
- CSS 布局 ,文档流,定位,中划线,表格属性,line-height居中对齐,z-index,display
- Android apk快速定位、灰色按钮克星--DroidSword
- 学会这些分析定位BUG小技巧,你离跨入中级测试还远吗?
- 技术分享 | 如何使用代理配置快速定位接口测试脚本问题?
- 自动化测试定位不到元素?可能是 frame 在搞鬼
- 干货|app自动化测试之Appium问题分析及定位
- app自动化测试(iOS)元素定位(新手篇)
- 【selenium自动化测试】如何定位页面元素,及对页面元素的操作方法
- 基于投影仪的定位技术
- Geolocation 地理定位
- 学会这些分析定位BUG小技巧,你离跨入中级测试还远吗?
- 技术分享 | 如何使用代理配置快速定位接口测试脚本问题?
- 技术分享 | 自动化测试中如何高效定位元素?
- Web自动化-Selenium自动化测试-10-Chrome-Console下定位元素
- 【HMS Core】定位服务逆地理编码问题
- 2013年6月18日星期二定位和定见
- js调绝对定位的top
- 系统问题定位
- 快速定位java系统的线上问题--转