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. C#开发学习人工智能的第一步

    前言 作为一个软件开发者,我们除了要学会复制,黏贴,还要学会调用API和优秀的开源类库. 也许,有人说C#做不了人工智能,如果你相信了,那只能说明你的思想还是狭隘的. 做不了人工智能的不是C#这种语言 ...

  2. c++学习笔记_4

    前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 运算符重 ...

  3. Mysql主从同步配置方案（Centos7）

    最近在做项目高可用时,需要使用数据同步.由于只有双节点,且采用主主同步可能存在循环同步的风险,故综合考虑采用Mysql主从同步(Master-Slave同步). 可能没有接触过Mysql数据同步时,可 ...

  4. 阿里云(ecs服务器)使用1-安装Mongdb数据库以及远程部署

    1.下载mongodb 百度云盘连接 :链接:https://pan.baidu.com/s/1b-hTS0XHQKpatecFoumLxw  提取码:z9ax 并送上可视化工具:链接:https:/ ...

  5. JIra配置权限方案

    目录: 添加用户 添加用户组 将用户分配到不同的组中 创建项目权限方案 配置项目采用的权限方案 1. 添加用户 1)使用admin权限的账户登录后,点击右上角的配置,选择system 2)在打开的页面 ...

  6. wps10.1中将txt转为excel

    1.将想要保存的内容保存为txt格式,用分隔符分隔好(包括空格.制表符.英文的逗号以及分号四种). 2.打开wps 3.点击数据->导入数据,选择刚才的txt文件 4.一步步操作,即可.

  7. 51nod 1060 最复杂的数（数论，反素数）

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1060 题解:可以去学习一下反素数. #include < ...

  8. 线段树（求单结点） hdu 1556 Color the ball

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  9. Increasing heap size while building the android source code on Ubuntu 15.10

    http://stackoverflow.com/questions/34940793/increasing-heap-size-while-building-the-android-source-c ...

  10. 一次使用scrapy的问题记录

    前景描述: 需要获取某APP的全国订单量,及抢单量.由于没有全国的选项所以只能分别对每一个城市进行订单的遍历.爬虫每天运行一次,一次获取48小时内的订单,从数据库中取出昨天的数据进行对比,有订单被抢则 ...