<!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. 自动修改博客CSS样式用的代码

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js&qu ...

  2. cisco交换机实现端口聚合

    0x00前言: 今天听老师讲端口聚合,为了方便日后复习故此有 了本篇随笔. 0x01准备工具: cisco模拟器 0x02:目录 为什么要用端口聚合? 广播风暴? 扩展:SMTP 0x03正文: 为什 ...

  3. mysql新手入门随笔

    1.启动/关闭服务器 第一种方法:通过Notifier 第二种方法: 通过Windows自带的服务管理:计算机右键选择管理弹出框选择"服务和应用程序"里的服务列表,从列表中找到My ...

  4. wipefs进程

    wipefs进程是啥,占用了百分之90多的cpu wipefs进程是啥,占用了百分之90多的cpu,把这个进程干掉了,过了一天又自动启动了,很多朋友应该遇到过类似的问题. wipefs是linux自带 ...

  5. iPhone页面的常用调试方法

    在iPhone中调试,大体上与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用. 本文基于此,简要介绍在iPhone中如何调试页面. 最终可以实现在Mac平台使 ...

  6. Windows 安装nginx并开机启动

    Win安装nginx并 开机启动 下载nginx安装包 nginx-1.12.2.zip,解压到D盘. https://pan.baidu.com/s/1InQa527yq35Q68c73RBb-A# ...

  7. 201621123050 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...

  8. 自主学习之RxSwift(一) -----Driver

    对于RxSwift,我也是初学者,此系列来记录我学习RxSwift的历程! (一) 想必关于Drive大家一定在RxSwift的Demo中看到过,也一定有些不解,抱着一起学习的态度,来了解一下Driv ...

  9. poj 2142 The Balance

    The Balance http://poj.org/problem?id=2142 Time Limit: 5000MS   Memory Limit: 65536K       Descripti ...

  10. Oracle数据库游标精解

    游标 定义:标识结果集中数据行的一种容器(CURSOR),游标允许应用程序对查询语句返回的行结果集中的每一行进行相同或不同的操作,而不是一次对整个结果集进行同一种操作.实际上是一种能从包括多条数据记录 ...