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. 007 Linux系统优化进阶

    一.更改 ssh 服务远程登录的配置 windows:默认远程端口和管理员用户 管理员:administrator port :3389 Linux:远程连接默认端口和超级用户 管理员:root   ...

  2. P4570 [BJWC2011]元素 线性基 + 贪心

    题意 给定n个物品,每个物品有一个编号和价值,问如何取使得拿到的物品价值总和最大,并且取得物品的编号的子集异或和不能为0. 思路 这是个贪心,我们先按照价值从大到小排序,然后贪心地取,如果当前要取的物 ...

  3. 2018中国大学生程序设计竞赛 - 网络选拔赛 hdu Find Integer 数论

    Find Integer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  4. CF - 1131 D Gourmet choice

    题目传送门 先把 = 的人用并查集合并在一起. 然后 < > 的建边, 跑一遍 toposort 之后就好了. 入度为0点的值肯定为1, 然后就是因为这个是按照时间线走过来的,所以一个点的 ...

  5. windows10环境下安装深度学习环境anaconda+pytorch+CUDA+cuDDN

    步骤零:安装anaconda.opencv.pytorch(这些不详细说明).复制运行代码,如果没有报错,说明已经可以了.不过大概率不行,我的会报错提示AssertionError: Torch no ...

  6. SqlServer数据库技巧

    1.数值转换失败提供默认值 , )) end

  7. 三个小白是如何在三个月内搭一个基于kaldi的嵌入式在线语音识别系统的

    前面的博客里说过最近几个月我从传统语音(语音通信)切到了智能语音(语音识别).刚开始是学语音识别领域的基础知识,学了后把自己学到的写了PPT给组内同学做了presentation(语音识别传统方法(G ...

  8. Kafka入门宝典（详细截图版）

    1.了解 Apache Kafka 1.1.简介 官网:http://kafka.apache.org/ Apache Kafka 是一个开源消息系统,由Scala 写成.是由Apache 软件基金会 ...

  9. DAX 第八篇：表连接

    表连接是指两张表根据关联字段,组合成一个数据集.表连接不仅可以利用数据模型中已有的关系,而且可以利用DAX表达式基于表的任意列定义连接条件.因此,在DAX中,实现表与表之间的连接,有两种方式: 第一种 ...

  10. Erlang模块supervisor翻译

    概要: 通用监督者行为   描述: 一个实现监督者的行为模块,一个监督被称为子进程的其它进程的进程.一个子进程可以是另一个监督者或工作者进程.工作者进程通常的实现使用gen_event,gen_fsm ...