z-index 、层叠上下文、层叠级别、z-index失效
一、z-index
z-index默认处于非激活状态,只有定位元素(即position:relative/absolute/fixed时)才会被激活。
z-index与层叠上下文关联。
当z-index相同(即层叠级别相同)的时候,遵循“后来者居上”的原则。
二、层叠上下文
以下两种情况,会创建层叠上下文:
1.根元素
2.z-index不为auto的“定位元素”
三、层叠级别
层叠级别由低到高为:
层叠上下文的边框和背景<负z-index<块盒子(普通文档流下的块盒子)<浮动盒子(非定位的浮动元素)<行内盒子(普通文档流下的行内盒子)<z-index:0<正index
四、某些情况下,z-index会在IE中无效。(个人未遇到该种情况,所以不便举例说明)
(该文供学习交流,欢迎大家共同探讨~)
z-index 、层叠上下文、层叠级别、z-index失效的更多相关文章
- 带大家认识CSS层叠上下文/层叠等级的区别和意义
		
什么是“层叠上下文” 层叠上下文(stacking context),是HTML中一个三维的概念.在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴.一般情 ...
 - 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
		
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
 - css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序
		
前言 在编写css样式代码的时候,我们经常会遇到z-index属性的使用,我们可能只了解z-index能够提高元素的层级,并不知道具体是怎么实现的.本文就来总结一个由z-index 引发的层叠上下文和 ...
 - 包含块、层叠上下文、BFC
		
包含块 什么是包含块?简单来说,就是决定一个元素大小和定位的元素.一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素: 1.position:fixed 的元素 包含块是当前可视 ...
 - 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠
		
写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...
 - z-index和层叠上下文
		
z-index基础介绍:三维坐标空间里,x轴通常用来表示水平位置,y轴来表示垂直位置,还有z轴来表示在纸面内外方向上的位置,像下面的图片一样: css允许的z-index的值是 ● auto (自动, ...
 - CSS——关于z-index及层叠上下文(stacking context)
		
以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...
 - 一篇通俗易懂的CSS层叠顺序与层叠上下文研究
		
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...
 - 层叠上下文(The stacking context)
		
MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...
 
随机推荐
- Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】
			
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...
 - Linux学习笔记之 Btrfs文件系统简介及使用
			
Btrfs 也有一个重要的缺点,当 BTree 中某个节点出现错误时,文件系统将失去该节点之下的所有的文件信息.而 ext2/3 却避免了这种被称为”错误扩散”的问题. Btrfs相关介绍: Btrf ...
 - Beauty of Array ZOJ - 3872(思维题)
			
Edward has an array A with N integers. He defines the beauty of an array as the summation of all dis ...
 - Codeforces Round #411(Div. 2)——ABCDEF
			
30min水掉前面4T,30min尝试读懂EF题,60min划水 顺便D忘记取膜丢50分,距比赛结束10s时hack失败丢50分... 从2620掉分到2520,从rank227掉到rank354.. ...
 - Xen、OpenVZ、KVM、Hyper-V、VMWare虚拟化技术介绍
			
一.Xen 官网:http://xen.org/ Xen 由剑桥大学开发,它是基于硬件的完全分割,物理上有多少的资源就只能分配多少资源,因此很难超售.可分为Xen-PV(半虚拟化),和Xen-HVM( ...
 - centos7 yum源
			
https://www.cnblogs.com/muyunren/p/7221505.html https://www.cnblogs.com/renpingsheng/p/7845096.html
 - asp.net--解决上传文件大小限制
			
原文地址 第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点 对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大 ...
 - ELECTRON开发环境配置方法
			
1.下载并安装Node.js 下载地址:https://nodejs.org/en/download/current/ 安装之后进行验证 2.下载并这装electron 安装命令:npm instal ...
 - [Jest] Write data driven tests in Jest with test.each
			
Often, we end up creating multiple unit tests for the same unit of code to make sure it behaves as e ...
 - 全部对于Unity3D中 NGUI 触发事件的监听方法
			
NGUI事件的种类非常多.比方点击.双击.拖动.滑动等等,他们处理事件的原理差点儿万全一样,本文仅仅用button来举例. 方法一.直接监听事件 把以下脚本直接绑定在button上.当button点击 ...