html z-dext优先级顺序,理解z-index和css中的层叠顺序问题（大神技术博的读后感？）...

一直对 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&period;聂 带你成为web开发大牛——入门篇(上)

作为一名IT届的后生,当初也经历过懵懂无知的实习期,对那种无力感深有体会.在这,希望能用我这几年的开发经验,让各位即将踏入或者刚刚踏入web开发领域的新人们少走些弯路.鉴于这是入门篇,下面我就从零为大 ...

【interview】汉诺塔学递归

https://www.cnblogs.com/yanlingyin/archive/2011/11/14/2247594.html https://www.cnblogs.com/dmego/p/5 ...