position属性含义

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

absolute

设置后处在原本出生位置，定位是相对设置了absolute、relative或fixed的上级元素进行定位，当所有的父级都无这些属性时，相对整个页面设置，不是相对body，因为body4面都有8px的外边距。原先在文档中的占位会释放，对后续文档会有影响。

relative

设置后处在原本出生位置，定位是相对原来的位置进行定位。原先在文档中的不会释放，对后续文档无影响。所以常在父集元素中用relative，子集元素用absolute进行相对定位。

fixed

设置后处在原本出生位置，定位是相对整个页面进行定位。原先在文档中的占位会释放，对后续文档会有影响。

sticky

基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

z-index含义

z-index（决定覆盖关系，为整数，可负）：因为设置了absolute、relative、fixed后会脱离文档流，而脱离了文档流后，会有覆盖关系，未脱离文档流之前会像输入文字一样，是不会重叠的，所以只有对设置了absolute、relative、fixed的元素生效，设置值后z-index属性默认为0（虽然浮动流也会脱离文档流，但设置z-index值是不会生效的）

比较规则

1.不同大小，值大的覆盖小，相同大小，以出生先后决定覆盖关系，后面出生的覆盖前面的。

2.只有相同父集的才能直接比较（即兄弟节点之间能比较），例如下图中b和B才能直接比较。

3.不同的父集时，需将2元素都转换为兄弟节点才能进行比较（即取他们的父集的z-index值进行比较，如果没有直接设置z-index，则用子孙的，并可以依次往下取，都没有才默认为0）。例如下图，我们比较C和d的z-index值时，先转化为相同父集的兄弟元素即B和b比较，b取自身的z-index值，如果没有就取c的，再没有才取d的，都没有则默认为0，B也同样。

4.z-index>=0的元素会覆盖浮动流（设置了float：left/right，这些元素也会脱离文档流，且是覆盖在文档流上面的）和文档流的元素，即只设置了absolute、relative、fixed的元素会覆盖文本或浮动元素，而当再设置z-index=负数时，会被文档流的元素覆盖（我们可以把文档流和浮动流的元素z-index分别当做等于-0.5和-0.25）。

<div class="a"><div class="b"><div class="c"><div class="d"></div></div></div><div class="B"><div class="C"></div></div>
</div>

注意

设置了position：absolute、relative、fixed不会改变元素display类型，而设置了float：left/right会将元素转换为inline-block元素，可以通过是否覆盖文字来验证，设置了position的会覆盖文字，而float不会，因为带有inline属性的都不会覆盖文字。

position属性与z-index属性详解，如何比较z-index值确定覆盖关系，为何z-index属性不生效。相关推荐

z-index失效的几种情况，父标签position属性为relative的时候,详解
网上对这一方面解释的很多,我也不想把别人的抄过来.在这里是加上我对这些情况的理解还有我的一些疑惑,若有问题,请留言,谢谢!!!话不多说,进入正题: 文章重点:z-index失效的一类情况:父标签pos ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
c语言中index函数,MATCH+INDEX函数详解
原标题:MATCH+INDEX函数详解小伙伴们好啊,今天和大家分享一个数据查询的最佳搭档--INDEX函数和MATCH函数.这两个函数组合,能够完成VLOOKUP函数和HLOOKUP函数的全部查找功 ...
详解127.0.0.1和localhost的关系和区别
详解127.0.0.1和localhost的关系和区别前情: 周三有同事突然问 127.0.0.1和localhost有什么不同吗,正好利用这个机会整理一下,这个虽然是大家常见的知识点,但是估计很多 ...
零基础学习PHP编程——详解Apache、PHP和Mysql之间的关系
详解Apache.PHP和Mysql之间的关系注意: 本文主要写给基础薄弱的同学, 如有不当之处,还请指正. 访问源站原创不易,转载请注明欢迎交流: 640765823 学习方法弄清楚Apa ...
【配置属性】—Entity Framework实例详解
Entity Framework Code First的默认行为是使用一系列约定将POCO类映射到表.然而,有时候,不能也不想遵循这些约定,那就需要重写它们.重写默认约定有两种方式:Data Anno ...
android自定义组件属性,Android组合控件详解自定义属性
组合控件详解 & 自定义属性组合控件是自定义控件的一种,只不过它是由其他几个原生控件组合而成,故名组合控件. 在实际项目中,GUI 会遇到一些可以提取出来做成自定义控件情况. 一个自定义控件 ...
php 六边形属性图能力数值图,详解基于 Canvas 手撸一个六边形能力图
一.前言六边形能力图如下,由 6 个六边形组成,每一个顶点代表其在某一方面的能力.这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图.当然,你也可以基于其他开源的 js 方案来 ...
详解html中 offsetTop、clientTop、scrollTop、offsetTop 的各属性
观看更佳:- 传送门 - scrollHeight:获取对象的滚动高度 - 传送门 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 - 传送门 scrollTop ...

position属性与z-index属性详解，如何比较z-index值确定覆盖关系，为何z-index属性不生效。