一直对 z-index不太理解,今天看到了大神的博客。。。http://www.zhangxinxu.com/wordpress/tag/z-index/
1、层叠上下文:是一个名词!是一个性质!此时网页元素在我眼里只有两类:有层叠上下文 和 没有层叠上下文的= =
有层叠上下文的元素比其他元素厉害,叠在上面。
可是层叠上下文内部也是有等级的,同样拥有层叠上下文的元素,层叠水平高的能叠在上面。
2、如何拥有层叠上下文?
1)含有position:relative/ position: absolute的元素(在chrome浏览器下,在设置了position:fixed的时候,当设置z-index:auto时,也会创建层叠上下文
2)设置 z-index:num;(如果没有设置z-index,那么默认值为 auto,不建立层叠上下文。设置为 0 则会建立层叠上下文。)//z-index只是决定层叠顺序中的一小部分!
3)元素的opacity(透明度)不是1时。(设置了opacity)
4)tranform值不是none。(设置了tranform)
5)mix-blend-mode值不是normal。(设置了mix-blend-mode)
6) filter值不为none
7)isolation值是isolate
8)wil-change指定的属性值为上面任意一个(这些还不太懂,先码了)
9)元素的webkit-overflow-scrolling设为touch
3、都拥有层叠上下文元素的相对顺序
1)如果层叠上下文元素不依赖z-index数值,则其层叠顺序是z-index:auto可看成z:index:0级别;
2)如果层叠上下文元素依赖z-index数值,则其层叠顺序由z-index值决定。(z-index大就叠在上面啦)
(呐就是图里的大神)
深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
[转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
CSS中的层叠上下文和层叠顺序
一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...
CSS中的层叠、特殊性、继承、样式表中的@import
CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...
CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
css中的层叠性及权重的比较
假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...
css样式,层叠顺序属性z-index
在做项目的时候,居然单击后显示的顺序一直被别的li标签压着,最后终于找到了,是css的z-index属性赋值了,值越大,显示的层就越高 详情推荐百度百科:z-index z-index是针对网页显示中 ...
CSS基础:层叠顺序和层叠上下文
简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...
随机推荐
linux的mount(挂载)命令详解
本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用 ...
禁止复制放在js文件中
1.使右键和复制失效 方法1: 在网页中加入以下代码: 复制代码代码如下:
HTML 学习笔记 CSS样式(定位)
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
Yii2 如何更好的在页面注入JavaScript
先添加一个widgets <?php /** * User: yiqing * Date: 14-9-15 * Time: 下午12:09 */ namespace common\widgets ...
js TAb
有点乱,用到了自定义getByClass函数.sibling函数
...this point
// this.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include using namespa ...
JSP TAG
Jsp tag 能够灵活的将公共JSP代码模块化,类似等等. ...
谨记给UpdatePanel中动态添加的控件赋ID
原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...
Mr.聂 带你成为web开发大牛——入门篇(上)
作为一名IT届的后生,当初也经历过懵懂无知的实习期,对那种无力感深有体会.在这,希望能用我这几年的开发经验,让各位即将踏入或者刚刚踏入web开发领域的新人们少走些弯路.鉴于这是入门篇,下面我就从零为大 ...
【interview】汉诺塔学递归
https://www.cnblogs.com/yanlingyin/archive/2011/11/14/2247594.html https://www.cnblogs.com/dmego/p/5 ...