<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <style type="text/css">

        .father{width:300px;height:300px;background:green;}

        .son1{position:absolute;z-index:10;width:200px;height:200px;background:yellow;}

        .son2{position:absolute;z-index:9;width:250px;height: 250px;background:pink;}

        .grand-s1{position:absolute;width:100px;height:100px;z-index:2;background:red;}

        .grand-s2{position:absolute;width:200px;height:100px;z-index:1;background:blue;}

        </style>

    </head>

    <body>

      <div class="father">

        <div class="son1">

          <div class="grand-s1"></div>

          <div class="grand-s2">

            <img src="data:images/nav1.jpg" alt="">

          </div>

        </div>

        <div class="son2"></div>

      </div>

    </body>

</html>

效果：

grand-s1,grand-s2的层级是包含的父级的权重。

总结：z-index设置的是已定位的兄弟元素的层次叠放顺序。

z-index的权重是叠加的的更多相关文章

  1. css选择器的权重

    权重会叠加!

  2. css三大特性及权重说明

    一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...

  3. CSS - 权重，样式优先级

    关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...

  4. css三大特性 & 选择器的权重

    层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性. 覆盖性原则: 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标 ...

  5. 关于Cewu Lu等的《Combining Sketch and Tone for Pencil Drawing Production》一文铅笔画算法的理解和笔录。

     相关论文的链接:Combining Sketch and Tone for Pencil Drawing Production 第一次看<Combining Sketch and Tone f ...

  6. 四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。

    laviewpbt  2014.8.4 编辑 Email:laviewpbt@sina.com   QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...

  7. Unity3D 骨骼动画原理学习笔记

    最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭哧吭哧的~ 首先列出学习参考的前人的文章,本文较多的参考了其中的表述: 1. ...

  8. Python3组合数据类型（元组、列表、集合、字典）语法

    一.序列类型(字符串,元组(),列表[]) 序列类型支持in,len(),分片[],迭代,5种内置序列类型:bytearray,bytes,list,str,tuple(元组). 1.元组可以嵌套(如 ...

  9. 四种简单的图像显著性区域特征提取方法-----AC/HC/LC/FT。

    四种简单的图像显著性区域特征提取方法-----> AC/HC/LC/FT. 分类: 图像处理 2014-08-03 12:40 4088人阅读 评论(4) 收藏 举报 salient regio ...

随机推荐

  1. Maven-04: 三套生命周期

    Maven的生命周期不是一个整体,而是拥有三套相互独立的生命周期,它们分别是clean,default和site. clean生命周期的目的是清理项目. default生命周期的目的是构建项目. si ...

  2. linux内核管理

      一  linux组成:kernel.库.rootfs.程序 1.kernel的功能: 1) kernel提供的功能都通过系统调用给用户接口 2) kernel包括:进程管理 .内存管理 .网络管理 ...

  3. 【Python】 基于秘钥的对称加密

    [Crypto] 关于用python进行信息的加密,类似的解决方案有很多比如用base64编码进行encode,再或者是hashlib来进行hash.但是还缺少一种明明场景很简单的解决方案,就是把利用 ...

  4. 【Python】 如何用pyinstaller打包python程序成exe

    [pyinstaller] pyinstaller在他们的官方网站上下载:http://www.pyinstaller.org/ 下载完pyinstaller之后还要安装一个支持包pywin32. 这 ...

  5. Algorithm --> 二进制中1的个数

    行文脉络 解法一——除法 解法二——移位 解法三——高效移位 解法四——查表 扩展问题——异或后转化为该问题 对于一个字节(8bit)的变量,求其二进制“1”的个数.例如6(二进制0000 0110) ...

  6. c++ --> static关键字总结

    static关键字总结 C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. ...

  7. Web安全概述

    互联网刚开始是安全的,但是伴随着黑客(Hacker)的诞生,互联网变得越来越不安全.任何一个事情都有两面性,黑客也有好有坏,好的黑客叫白帽子,坏的黑客叫黑帽子.与此同时,随着Web技术发展越来越成熟, ...

  8. 基于ECharts的饼状数据展示

    一.导入ECharts文件 二.HTML代码 大小后期自己调 三.后台代码 四.js代码 不要问为什么- -我是扒下来的 可复制代码: //基于准备好的dom,初始化echarts实例 var myD ...

  9. win10下NeuralStyle的tensorflow版实验

    ---恢复内容开始--- 首先配置win10下的tensorflow-gpu的运行环境,然后在github上将NeuralStyle拷贝下来,最后根据文档说明参数,运行文件,即可得到自己喜欢的styl ...

  10. Idea简单SpringMVC框架配置

    前边已经介绍过了Struts在Idea上的配置,相对于Struts来说,我觉得SpringMVC有更多的优势,首先Struts是需要对action进行配置,页面发送不同的请求,就需要配置不同的acti ...