position:absolute 的深入探讨
今天给大家说说,position:absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属性的时候,该元素的position:absolute会参考body进行定位。
换句话说是如果父级设置了position(且值为非static),参照(最近的)父级的内容区域的左上角为初始点,结合top left right bottom 进行定位; 如果没有设置,往其父级继续寻找,直到找到为止,如果一直没有,则相对与body进行定位(我们猜想是这样的,但是不一定是对哦~~)。
测试实例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<style>
/*正常是不能这么设置的,这边主要是用来测试*/
html {
margin: 20px;
border: 20px solid red;
}
/*正常是不能这么设置的,这边主要是用来测试*/
body {
height: 400px;
margin: 30px;
border: 20px solid green;
}
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
</body>
</html>
测试结果:
Tips:图中红色边框为html元素,绿色边框为body元素
结论:测试数据发现如果定位的元素的父级(祖父)没有设置position属性的时候,不会参考body进行定位。
为了再次验证我们的结论,我们给body设置position属性(值为非static),看看结果会是如何?
测试实例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<style>
/*正常是不能这么设置的,这边主要是用来测试*/
html {
margin: 20px;
border: 20px solid red;
}
/*正常是不能这么设置的,这边主要是用来测试*/
body {
position: relative;
height: 400px;
margin: 30px;
border: 20px solid green;
}
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
</body>
</html>
测试结果:
Tips:图中红色边框为html元素,绿色边框为body元素
看到结果,发现如果给body设置了position属性就正常了,所以我们之前的猜想是错误的,不是参考body进行定位的。
那么position:absolute是参考哪一个父级(祖父)元素进行定位的?
当给元素设置absolute的时候,它会往上查找 absolute 元素的第一个父元素,如果该父元素的 position 值存在(且不为 static),那么就是根据该父元素进行的定位,否则将会继续查找该父元素的父元素,一直追溯到某个父元素具备不为 static 的 position 值为止,如果不存在满足条件的父元素,则会根据最外层的 window 进行定位。
英文描述如下:
欢迎沟通交流~HTML5学堂
- 快速入门系列--WCF--04元数据和异常处理
- linq to sql中慎用Where<T>(Func<TSource, bool> predicate),小心被Linq给"骗"了!
- 快速入门系列--WCF--03RESTFUL服务与示例
- SQL练习之不破坏应用程序现有查询的修改模式
- 快速入门系列--WCF--02消息、会话与服务寄宿
- JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法
- 快速入门系列--深入理解C#
- “家庭贷款”域名Home.loans已经建站为家庭贷款相关的网站
- 微信亿级用户异常检测框架的设计与实践
- 程序员必知的6点编程秘诀,编程三板斧将解决90%问题!
- JavaScript之面向对象学习三原型语法升级
- 腾讯入局物业管理,欲改造传统服务?
- JavaScript之面向对象学习五(JS原生引用类型Array、Object、String等等)的原型对象介绍
- SQL学习之分组数据Group by
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Css实现聊天框
- 机器学习之KNN原理与代码实现
- Dart常用的数据类型
- Vue版本更新清除浏览器缓存
- maven:Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenC
- maven整合struts: Compilation error org.eclipse.jdt.internal.compiler.classfmt.ClassFormatException
- Dart判断运算符
- 机器学习之朴素贝叶斯算法原理与代码实现
- jquery中ajax的使用(java)
- mybatis框架org.apache.ibatis.exceptions.PersistenceException:
- Spring源码学习笔记(3)——容器的功能扩展
- Dart数组的常规操作
- 机器学习之logistic回归算法与代码实现原理
- spring整合中application.xml配置
- RocketMQ详解(10)——Consumer详解