堆叠顺序的误区和z-index

2019独角兽企业重金招聘Python工程师标准>>>

Z-index

在我们常用的css中z-index 属性是设置节点的堆叠顺序, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序的概念模糊不清，这样将会导致我们在平时的布局中出现一些问题。下面我个人对css中z-index的一些个人的认识，希望能帮到大家，有说错的地方希望大家指正。

css布局中我们常常会使用一些float:laft;和float:right;以及定位中的absolute,relative,fixed;

有的人误认为定位和定位之间是本身就存在附带堆叠顺序的,在自己经过测试之后发现,他们的默认是没有堆叠顺序的,只是在html中标签的前后顺序导致的而使大家误认为是定位和定位之间的堆叠顺序而导致的。

下面是正常使用z-index代码示例：

定位中的static是标准流，所以这里不做讲解

当我们有三个盒子

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

我们给他们分别设置fixed，relative，absolute；背景色为红色，蓝色，绿色

我们会发现absolute的绿色盒子会在最上面，在html代码中更改标签的位置顺序则可以让盒子出现在堆叠层的最上面，当然如果我们要想在不改变html标签的顺序，那么我们就可以使用第二种方法z-index：

在我们添加z-index是要注意这个样式是有值的；值也可以影响我们的堆叠顺序。

样式内z-index的值越大的堆叠层越高，当然我们也要注意z-index也并不是在什么时候都管用的。

只有在同一样式时，比如定位与定位之间的堆叠，浮动与浮动之间的堆叠，如果有两个盒子，一个盒子为浮动元素一个盒子为定位元素，两个盒子发生堆叠，此时我们想要浮动的盒子显示在定位盒子之上，我们是没有办法的，设置z-index这个时候是没有用的。

定位的盒子本身堆叠的顺序就要比浮动的盒子的堆叠顺序要高，所以此时我们要解决这个问题就需要把浮动盒子换成定位的盒子，设置之后我们就可以z-index来设置堆叠顺序了。

上面是本人的一点个人观点，希望可以帮到大家，后续自己也会写一些关于web中一些个人认识。有不同观点大家可以随意发表。

转载于:https://my.oschina.net/zzjweb/blog/649631

堆叠顺序的误区和z-index相关推荐

zIndex 属性设置元素的堆叠顺序。
http://www.w3school.com.cn/jsref/prop_style_zindex.asp zIndex 属性设置元素的堆叠顺序. 该属性设置一个定位元素沿 z 轴的位置,z 轴定义 ...
JavaScript（JS）有一组英文歌曲，按照歌曲名称的字母顺序从“A”到“Z”顺序排列，保存在一个数组中。
JavaScript有一组英文歌曲,按照歌曲名称的字母顺序从"A"到"Z"顺序排列,保存在一个数组中.网上搜下英文歌,现在增加一首新歌,将他插入数组,并保持原来 ...
【CSS笔记】CSS设置元素堆叠顺序、元素宽高自适应、calc数学函数
目录一.堆叠顺序 1.1.默认堆叠顺序 1.2.设置堆叠顺序二.宽高自适应
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
获取设置HTML元素的zIndex属性(元素的堆叠顺序)
数值越大表示离用户越近,也就是层叠顺序越靠上,优先显示.zIndex大的元素会浮于zIndex小的元素之上. <script>//获取$("document").rea ...
js怎么设置z index.html,HTML5 Canvas set z-index
j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似. 回答者markE给出了该问题的处理方式: Yes..kind of yes. You ...
html设置z index.html,CSS中z-index属性的使用方法和示例介绍
怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...
CSS学习——基础分类整理
1. CSS 层叠样式表: Cascading Style Sheets,定义如何显示html元素 CSS规则: 选择器{属性: 值; 属性: 值;} CSS注释: /*在这里写注释说 ...
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标了解掌握CSS值和单位了解掌握CSS文字排版了解掌握CSS变换,过渡,动画了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
Qt 5.12--Item详解
Qt 5.12--Item详解 1 作为容器 2 默认属性 3 透明度 4 堆叠顺序 5 定位子项目和坐标映射参考 QML中的所有可视项目都继承自Item.虽然Item本身没有可视化的外观,但是它定 ...

堆叠顺序的误区和z-index

堆叠顺序的误区和z-index相关推荐

最新文章

热门文章