z-index

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

  • z-index 值表示谁压着谁，数值大的压盖住数值小的，
  • 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
  • z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
  • 从父现象：父亲怂了，儿子再牛逼也没用
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         *{
             padding: 0;
             margin: 0;
         }
         .father1{
             width: 300px;
             height: 300px;
             background-color: red;
             position:relative;
             z-index: 3;
         }
         .child1{
             width: 100px;
             height: 100px;
             background-color: purple;
             position: absolute;
             top: 280px;
             left: 350px;
             z-index: 20;

         }
         .father2{
             width: 300px;
             height: 300px;
             background-color: green;
             position:relative;
             z-index: 2;
         }
         .child2{
             width: 100px;
             height: 100px;
             background-color: yellow;
             position: absolute;
             top: 0;
             left: 350px;
             z-index: 21;
         }
     </style>
 </head>
 <body>
     <div class="father1">
         <div class="child1"></div>
     </div>
     <div class="father2">
         <div class="child2"></div>
     </div>

 </body>
 </html>

作者：流浪者

日期：2019-08-31

12-z-index的更多相关文章

  1. [20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED2.txt

    [20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED2.txt --//简单探究12c TABLE ACCESS BY INDEX ROWID BATCH ...

  2. Service Discovery in WCF 4.0 – Part 2 z

    Service Discovery in WCF 4.0 – Part 2 In the previous post I discussed about the basic usage of WCF ...

  3. python中count和index

    str = [1,2,3,4,5] #定义一个列表 str = 3 #列表3 str [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5] str.count(1 ...

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

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

  5. java web学习总结(六) -------------------servlet开发(二)

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  6. 《利用python进行数据分析》读书笔记--第五章 pandas入门

    http://www.cnblogs.com/batteryhp/p/5006274.html pandas是本书后续内容的首选库.pandas可以满足以下需求: 具备按轴自动或显式数据对齐功能的数据 ...

  7. servlet（二）

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  8. python基础知识2——基本的数据类型——整型，长整型，浮点型，字符串

    磨人的小妖精们啊!终于可以归置下自己的大脑啦,在这里我要把--整型,长整型,浮点型,字符串,列表,元组,字典,集合,这几个知识点特别多的东西,统一的捯饬捯饬,不然一直脑袋里面乱乱的. 对于Python ...

  9. servlet 学习（二）

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  10. python字符类型的一些方法

    python 字符串和字节互转换.bytes(s, encoding = "utf8") str(b, encoding = "utf-8") i.isspac ...

随机推荐

  1. 爬虫工程师分享：三步就搞定 Android 逆向

    本文源于我近期的一次公司内部分享,通过逆向某款 APP 来介绍逆向过程.由于仅作为学习用途,APP 的相关信息会被遮盖,敬请理解. 关于逆向 逆向--包括但不限于通过反编译.Hook 等手段,来解析一 ...

  2. E-triples II_2019牛客暑期多校训练营（第四场）

    求用n个3的倍数的数按位或出数字a的方案数有多少种(0也算3的倍数) 题解 若数b的每个二进制位上的1,在a中也为1,则称b为a的子集 容易知道任意个a的子集按位或出来的结果还是a的子集 若问题改为按 ...

  3. JPA案例

    ORM 什么是ORM: 对象关系映射(Object Relational Mapping,简称ORM)是建立实体类和数据库表之间的关系,从而达到操作实体类就相当于操作数据库表的目的. ORM思想 主要 ...

  4. PHP 实现字符串表达式计算

    什么是字符串表达式?即,将我们常见的表达式文本写到了字符串中,如:"$age >= 20",$age 的值是动态的整型变量. 什么是字符串表达式计算?即,我们需要一段程序来执 ...

  5. ElasticSearch常见经典面试题

    1.为什么要使用Elasticsearch? ​ 因为在我们商城中的数据,将来会非常多,所以采用以往的模糊查询,模糊查询前置配置,会放弃索引,导致商品查询是全表扫面,在百万级别的数据库中,效率非常低下 ...

  6. WEB应用中普通java代码如何读取资源文件

    首先: 资源文件分两种:后缀.xml文件和.properties文件 .xml文件:当数据之间有联系时用.xml .properties文件:当数据之间没有联系时用.properties 正题:   ...

  7. Python学习之turtle库和蟒蛇绘制程序

    Python的函数库 Python语言与C语言Java类似,可以大量使用外部函数库包含在安装包中的函数库:. 比如math, random, turtle等其他函数库,其他函数库用户根据代码需求自行安 ...

  8. 归并排序、jensen不等式、非线性、深度学习

    前言 在此记录一些不太成熟的思考,希望对各位看官有所启发. 从题目可以看出来这篇文章的主题很杂,这篇文章中我主要讨论的是深度学习为什么要"深"这个问题.先给出结论吧:"深 ...

  9. 虚拟化（一） -VMware产品介绍

    https://www.cnblogs.com/zhrngM/p/9547928.html 由于公司最近在做虚拟化监控,因此就需要把虚拟化方面的知识给学习总结一下,对于虚拟化的概念,摘自百度百科,如下 ...

  10. iOS 13 绕过锁屏密码漏洞

    iOS 13 很快就要发布了,在未正式发布之前,西班牙的安全研究员 Jose Rodriguez 公开了一个漏洞,能够查绕过锁屏密码查看通讯录.照片.短信. 在 iOS 设备上,当屏幕锁定时,用户无法 ...