<!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. Mycat 配置说明（rule.xml）

    rule.xml 配置文件定义了我们对表进行拆分所涉及到的规则定义.我们可以灵活的对表使用不同的分片算法, 或者对表使用相同的算法但具体的参数不同. tableRule 标签 该标签用于定义表的拆分规 ...

  2. SpringBoot中MongoDB注解概念及使用

    spring-data-mongodb主要有以下注解 @Id 主键,不可重复,自带索引,可以在定义的列名上标注,需要自己生成并维护不重复的约束.如果自己不设置@Id主键,mongo会自动生成一个唯一主 ...

  3. docker部署PMA（LNMP架构）

    上篇文章中已经部署好php环境,测试也已经OK centos 7 docker 启动了一个web服务 但是启动时 报 WARNING: IPv4 forwarding is disabled. Net ...

  4. 解决图片裁剪com.android.camera.action.CROP和intent.putExtra("return-data", true);

    最近在做一个图片上传,在上传之前需要对照片进行裁剪,遇到一个坑,在别的手机上运行都正常,在小米手机上却遇见一个问题,选中图片无法裁剪,直接闪退,目前已解决!之前出过问题的地方会标红 //选择图片 pr ...

  5. color 圆盘染色

    Color 圆盘染色 题目大意:给你一个圆盘,等分成n个扇形,有m种颜色,每两个相邻的扇形不能相交,求染色方案数. 注释:m,n<=$10^6$. 想法:这题是小圆盘染色的加强版(小圆盘染色?) ...

  6. Eclipse项目中web app libraries和 Referenced Libraries区别

    Referenced  Libraries是编译环境下使用的JAR包,所谓编译环境下使用的JAR包, 就是说你在Eclipse中进行源文件的编写的时候,所需要引用到的类都从Referenced  Li ...

  7. C#/AutoCAD 2018/ObjectArx/二次开发添加删除实体的工具函数(四)

    1.添加删除实体 C# ObjectARX二次开发添加删除实体是非常容易主要代码如下: 添加实体: objId = btr.AppendEntity(entity); trans.AddNewlyCr ...

  8. RabbitMQ封装实战

    先说下背景:上周开始给项目添加曾经没有过的消息中间件.虽然说,一路到头非常容易,直接google,万事不愁~可是生活远不仅是眼前的"苟且".首先是想使用其他项目使用过的一套对mq封 ...

  9. Alpha第十天

    Alpha第十天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...

  10. Python实现基于协程的异步爬虫

    一.课程介绍 1. 课程来源 本课程核心部分来自<500 lines or less>项目,作者是来自 MongoDB 的工程师 A. Jesse Jiryu Davis 与 Python ...