要想z-index可以使用,就要配合定位元素使用即position

如果定位元素z-index没有发生嵌套:

1.后来居上的准则

2.哪个大,哪个上

例如

如果定位元素z-index发生嵌套:

1.祖先优先原则;

例如

其他参与层叠上下文的属性

1.display:flex 影响层叠,要和子元素配合z-index不为auto

2.opacity不为1的时候

3.给元素加rotate

css之z-index的更多相关文章

  1. img和css背景的选择

    在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人), ...

  2. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  3. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  4. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  5. CSS定位(postion)和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  6. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  7. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  8. 潭州课堂25班:Ph201805201 WEB 之 CSS 第三课 (课堂笔记)

    在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...

  9. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  10. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

随机推荐

  1. 得到APP【每天听本书】微信交流群(每天更新)

    得到APP[每天听本书]微信交流群,每天更新下载学习资料 添加个人微信号:zhidu10000 进入微信群. “坚持每天读一本书,每天进步1.01,每年进步37.8倍” 2016年书单合辑点此链接,查 ...

  2. JKS TO PEM

    tomcat 的ssl 会使用到jks,而haproxy的ssl(非tcp代理方式)会使用到pem 如果从tomcat的ssl需要迁移到haproxy的ssl,就需要从jks中读取相关信息生成pem文 ...

  3. ruby中excel简单操作以及文件读取操作方法

    # -*-coding:utf-8 -*-#author:kanlijunrequire 'win32ole'require 'fileutils'class ResultAnalyse @@i=0 ...

  4. Oracle 11g服务器安装详细步骤

    原出处:http://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html 方法/步骤   1 大家可以根据自己的操作系统是多少位(32位或6 ...

  5. 关于 iOS 10 中 ATS 的问题

    本文于 2016 年 11 月 28 日按照 Apple 最新的文档和 Xcode 8 中的表现进行了部分更新. WWDC 15 提出的 ATS (App Transport Security) 是 ...

  6. Python 多线程

    一.线程的使用 需导入模块: from threading import Thread 二.基本使用 def fun1(arg1, v): print(arg1) print('before') t1 ...

  7. Map接口

    Map实现的包括HashMap 和TreeMap .建议使用HashMap ,效率更高.并且允许使用null值,单是必须保证键的唯一性,TreeMap不允许有空.在添加删除和定位映射关系的时候不如Ha ...

  8. 使用delphi+intraweb进行微信开发5—准备实现微信API,先从获取AccessToken开始

    在前4讲中我们已经使iw开发的应用成功和微信进行了对接,再接下来的章节中我们开始逐一尝试和实现微信的各个API,开始前先来点准备工作 首先需要明确的是,微信的API都是通过https调用实现的,分为p ...

  9. Django 静态文件配置(static files)

    Django version: 1.9 Python versrion: 3.5.2 这几天Django配置静态文件(本例是要加载index.css), 总是不对,最后终于试对了,这里记录下,方便以后 ...

  10. Delegate, Method as Parameter.

    代理, 将方法作为另一方法的参数. 类似C里面的函数指针. using System; using System.Windows.Forms; using System.Threading; name ...