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 ...
随机推荐
- C#.net拖拽实现获得文件路径
思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), 在DragDrop事件中对“信息”进行解析. 窗体的AllowDrop属性必须设置成tru ...
- 踩到两只“bug”
近期在修复ex和头儿的代码时,碰到两个特别点的bug,其实也不能称之为bug,非常简单的用法,稍不严谨点可能就出错了. 第一个是in_array,大家都知道功能是检查一个值是否在数组中,第三个参数传入 ...
- C#程序员整理的Unity 3D笔记（十五）：Unity 3D UI控件至尊–NGUI
目前,UGUI问世不过半年(其随着Unity 4.6发布问世),而市面上商用的产品,UI控件的至尊为NGUI:影响力和广度(可搜索公司招聘Unity 3D,常常能看到对NGUI关键词). NGUI虽然 ...
- Swift扩展（Extension）
在现有类和结构体的类型基础上,扩展新的功能. 语法: extension SomeType{ // new functionality to add to SomeType goes here } A ...
- CentOS 7 下Docker的安装
笔者是刚入行1年的新鸟,近期公司开始推Docker技术.这个系列的文章都是基于CentOS7系统下进行讲解的. Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及 ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- Contest1065 - 第四届“图灵杯”NEUQ-ACM程序设计竞赛（个人赛）G爬楼梯
题目描述 由于第m个台阶上有好吃的薯条,所以薯片现在要爬一段m阶的楼梯. 薯片每步最多能爬k个阶梯,但是每到了第i个台阶,薯片身上的糖果都会掉落ai个,现在问你薯片至少得掉多少糖果才能得到薯条? 输入 ...
- 创建ID3D11Device可能会遇到的问题，不能使用具体的IDXGIAdapter
要使用具体硬件的显示适配器创建D3D11必须把driverTypes设为D3D_DRIVER_TYPE_UNKNOWN 如下 // 创建D3D11设备 HRESULT hr = D3D11Create ...
- 韩顺平细说Servlet视频系列之tom相关内容
韩顺平细说Servlet视频系列之tom相关内容 tomcat部署项目操作(注意:6.0版本以后的支持该操作,5.x版本需要另外配置?待验证!) 项目发布到tomcat的webapps文件下,然后启动 ...
- 转载：邮箱正则表达式Comparing E-mail Address Validating Regular Expressions
Comparing E-mail Address Validating Regular Expressions Updated: 2/3/2012 Summary This page compares ...