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>
为了再次验证我们的结论,我们给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 进行定位。
position:absolute 的深入探讨的更多相关文章
- 解决绝对定位div position: absolute 后面的<a> Link不能点击
今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...
- position absolute 绝对定位 设置问题
今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- css position:absolute 如何居中对齐
写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center
- 【总结】我所整理的float, inline-block还有position:absolute
这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...
- 关于position:absolute的困惑
今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...
- position:absolute和float会隐式的改变display类型
position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...
随机推荐
- margin相关
1.图片与文字对齐问题 如果图片和文字差不多大时,使用兼容性强的margin负值方法. 方法:img{margin:0 3px -3px 0;} 2.div嵌套后margin出现失效(转移)问题 原因 ...
- Lucene实现索引和查询
0引言 随着万维网的发展和大数据时代的到来,每天都有大量的数字化信息在生产.存储.传递和转化,如何从大量的信息中以一定的方式找到满足自己需求的信息,使之有序化并加以利用成为一大难题.全文检索技术是现如 ...
- ES6初体验
开始学习ES6,打算走全栈这条路了,废话不多说,开始吧. 首先安装node环境,去node官网上面下载node最新版本的,我用的系统是window10,所以我只需要下一步下一步就行了,安装完成后打开c ...
- SQL Server 文章目录
SQL Server系列: 高可用方案 SQL Server Alwayson概念总结 SQL Server AlwaysOn搭建 SQL Server2016 Alwayson新增功能 SQL Se ...
- Tensorflow之MNIST机器学习入门
MNIST机器学习的原理: 通过一次次的 输入某张图片的像素值(用784维向量表示)以及这张图片对应的数字(用10维向量表示比如数字1用[0,1,0,0,0,0,0,0,0,0]表示),来优化10*7 ...
- 初学者福音——10个最佳APP开发入门在线学习网站
根据Payscale的调查显示,现在的APP开发人员的年薪达到:$66,851.这也是为什么那么多初学的开发都想跻身到APP开发这行业的主要原因之一.每当你打开App Store时候,看着琳琅满目的A ...
- 百度图表插件echart简单应用,简单配置一些要显示的样式及种类
从echart官网下载js,然后引入jq即可运行.足够简单应用了 关键词:echart控制:图标标题.数据标题.折线图.柱状图切换按钮.恢复刷新图表按钮.保存为图片按钮.坐标系控制.坐标数据.坐标倾斜 ...
- 安装spark单机环境
(假定已经装好的hadoop,不管你装没装好,反正我是装好了) 1 下载spark安装包 http://spark.apache.org/downloads.html 下载spark-1.6.1-bi ...
- linux大文件分包压缩和批量解压命令tar // tar 排除指定目录
压缩命令主要用到tar打包和split分割,命令如下: tar czf - aaa | split -b 1024m - bbb.tar.gz_ aaa可以是文件也可以是目录, 大小可以是b.k.m这 ...
- 导出生成xsl文件
public String expData() throws Exception{ List<SubArea> list = subAreaService.fin ...