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. Oracle - 自治事务autonomous transaction

    自治事务 - autonomous transaction 在Oracle数据库中,有时候我们会希望记录一个过程或者函数的运行日志,不管正常运行结束还是触发异常结束,都要记录. 正常结束的没有问题,但 ...

  2. netty源码解解析(4.0)-20 ChannelHandler: 自己实现一个自定义协议的服务器和客户端

    本章不会直接分析Netty源码,而是通过使用Netty的能力实现一个自定义协议的服务器和客户端.通过这样的实践,可以更深刻地理解Netty的相关代码,同时可以了解,在设计实现自定义协议的过程中需要解决 ...

  3. hdu 4612 无向图连通分量缩点，然后求树的最大直径

    #pragma comment(linker,"/STACK:102400000,102400000") #include <iostream> #include &l ...

  4. 【Offer】[60] 【n个骰子的点数】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S.输入n,打印出s的所有可能的值出现的概率. [牛客网刷题地址]无 思路分析 递归的方 ...

  5. 【Offer】[40] 【最小的K个数】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入n个整数,找出其中最小的k个数.例如,输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 牛客网刷题地 ...

  6. CentSO7.6下部署Maridb Galera Cluster 实践记录（二）

    早上三个节点的数据库都启动正常,下午上班就都不行了,哎,VM啊,中午就是让主机休息了一些而已么. 今天继续折腾中,第二天再来一遍:重启第一台服务器上的galera时竟然报错了:错误如下:    It ...

  7. 【LeetCode】524-通过删除字母匹配到字典里最长单词

    题目描述 给定一个字符串和一个字符串字典,找到字典里面最长的字符串,该字符串可以通过删除给定字符串的某些字符来得到.如果答案不止一个,返回长度最长且字典顺序最小的字符串.如果答案不存在,则返回空字符串 ...

  8. NameNode数据存储

    HDFS架构图 HDFS原理 1)  三大组件 NameNode. DataNode .SecondaryNameNode 2)NameNode 存储元数据(文件名.创建时间.大小.权限.文件与blo ...

  9. linux常用命令一

    linux常用命令一 1.用rz sz命令传输文件直接在Ubuntu命令行下运行rz命令,系统会提示你“程序"rz"尚未安装.那么先安装:sudo apt-get install ...

  10. 湘潭大学oj循环1-5

    #include <stdio.h>#include <stdlib.h> int main(){   int b,s,n;    int a[101]; A:scanf(&q ...