HTML元素大小和位置相对于谁的问题
一、如果元素的position属性值为absolute，那么此时分为两种情况：
1. 父级（包括直接父级和间接父级）元素中没有定义position属性（即默认属性static），那么该元素会参照页面，以页面为基准进行定位，top, left等属性会参照页面。
如果该元素的width和height属性是百分数的话，那么这两个属性也是参照页面的宽度和高度。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
width: 200px;
height: 200px;
background: #ccc;
}
#div2 {
width: 50%;
height: 50%;
background: #aaa;
top: 100px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
以上代码中，div2是绝对定位，而其父级元素没有设置position属性，那么该元素就会以页面为参照进行定位。
从图中可以看到，div2是相对于页面定位的，而且其宽度和高度是页面宽高的一半。
从控制台可以看到，页面的宽度和高度正好是div2元素的2倍。
2. 父级元素定义了position属性(relative或absolute)，则会参照父级元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
width: 200px;
height: 200px;
background: #ccc;
position: relative;
top: 100px;
left: 100px;
}
#div2 {
width: 50%;
height: 50%;
background: #aaa;
top: 100px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">div2</div>
</div>
</body>
</html>
从图中可以看到，div2是相对于div1定位的，宽度和高度也是相对于div1
二、如果元素的position属性值为relative，那么该元素相对于其正常位置（即position:static）定位。
默认情况下宽度会占满父容器，高度根据本身内容决定。当是父元素的第一个子元素时，位置会在父元素的左上角。
那么设置其位置和大小就会以自己为参照，height的情况特殊，当设置height时，会以充满父容器的状态为参照。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
width: 100px;
height: 100px;
background: #ccc;
}
#div2 {
width: 50%;
height: 50%;
background: #aaa;
top: 100px;
left: 100px;
position: relative;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
HTML元素大小和位置相对于谁的问题的更多相关文章
- DOM元素的大小和位置
HTML: <div id="parent"> <div id="box"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测 ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- dojo/dom-geometry元素大小
在进入源码分析前,我们先来点基础知识.下面这张图画的是元素的盒式模型,这个没有兼容性问题,有问题的是元素的宽高怎么算.以宽度为例,ff中 元素宽度=content宽度,而在ie中 元素宽度=conte ...
- DOM元素尺寸和位置
一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...
- JavaScript高级程序设计之元素大小
1.偏移量 // 元素相对于文档的偏移量 var getOffSet = function (ele) { var actualLeft = ele.offsetLeft, // 相对于offsetP ...
- [百度]数组A中任意两个相邻元素大小相差1，在其中查找某个数
一.问题来源及描述 今天看了July的微博,发现了七月问题,有这个题,挺有意思的. 数组A中任意两个相邻元素大小相差1,现给定这样的数组A和目标整数t,找出t在数组A中的位置.如数组:[1,2,3,4 ...
- canvas元素大小与绘图表面大小
原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...
随机推荐
- img与父元素的间隙解决
近来在做H5页面时,突然发现一个问题,使用一个div包裹一个img,在手机预览时,发现图片与div之间有间隙. 当时第一反应就是,是不是间距没有设置为0,于是预览了下代码: .active img { ...
- HTML5自带的原生定位
使用谷歌的,与百度有偏差,一般不推荐使用 一.window.navigator.geolocation 验证浏览器是否支持 if (window.navigator.geolocation) { ...
- MYfirst
终于有了自己的博客了,啊哈哈!
- python之平台独立的调试工具winpdb介绍
Winpdb is a platform independent graphical GPL Python debugger with support for remote debugging ove ...
- 第四篇、CocoaPods 镜像的更新 原来的淘宝镜像已经不再更新
在开发应用,我们常常使用cocoaPods来管理第三方框架,但是原来的淘宝的镜像不更新了 新的镜像地址:https://gems.ruby-china.org/
- ios开发：GCD多线程
ios有三种多线程编程技术,分别是NSThread,Cocoa NSOperation和GCD,GCD全称Grand Central Dispatch 是Apple开发的一个多核编程的解决方法,在iO ...
- javascript笔记——jqGrid 格式化时间列
{ name:'startTime', sortable:false, editable:true, width:300, sorttype:'date', //unformat:startTime, ...
- vs2010创建COM以及调用
1,创建COM组件 2,调用COM 3,MFC调用COM
- myeclipse 的 working set
想必大家的myeclipse会有很多工程看的和不方便,那么怎么让它看的简洁一点呢,使用working set 会让你的目录看起来没有那么的多. 首先是怎么创建 working set ,在新建时选择 ...
- linux 运维知识体系
这里将会介绍一下,LINUX运维工程师的知识体系. 只能说是个人理解吧.并不是必要或者充分的,仅供网友参考. 大部分本博客都有涉及,并不完整. 1.LINUX运维基础 1.1.LINUX系统的简介,分 ...