12-z-index
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的更多相关文章
- [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 ...
- 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 ...
- 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 ...
- 四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。
laviewpbt 2014.8.4 编辑 Email:laviewpbt@sina.com QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...
- java web学习总结(六) -------------------servlet开发(二)
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
- 《利用python进行数据分析》读书笔记--第五章 pandas入门
http://www.cnblogs.com/batteryhp/p/5006274.html pandas是本书后续内容的首选库.pandas可以满足以下需求: 具备按轴自动或显式数据对齐功能的数据 ...
- servlet（二）
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
- python基础知识2——基本的数据类型——整型，长整型，浮点型，字符串
磨人的小妖精们啊!终于可以归置下自己的大脑啦,在这里我要把--整型,长整型,浮点型,字符串,列表,元组,字典,集合,这几个知识点特别多的东西,统一的捯饬捯饬,不然一直脑袋里面乱乱的. 对于Python ...
- servlet 学习（二）
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
- python字符类型的一些方法
python 字符串和字节互转换.bytes(s, encoding = "utf8") str(b, encoding = "utf-8") i.isspac ...
随机推荐
- Delphi - cxGrid设定字段类型为CheckBox
cxGrid设定字段类型为CheckBox 1:设定OraQuery属性 CachedUpdates设定为True: 双击打开OraQuery,选中Update SQLs页面,Insert.Updat ...
- .NET Core 使用 K8S ConfigMap的正确姿势
背景 ASP.NET Core默认的配置文件定义在appsetings.json和appsettings.{Environment}.json文件中. 这里面有一个问题就是,在使用容器部署时,每次修改 ...
- 在.net core web api项目中安装swagger展示api接口（相当于生成api文档）
1, 建立或打开项目后,在“程序包管理器控制台”中执行以下命令添加包引用: Install-Package Swashbuckle.AspNetCore 2,在项目中打开Startup.cs文件,找 ...
- 将excel中某列数据中，含有指定字符串的记录取出，并生成用这个字符串命名的txt文件
Python 一大重要的功能,就是可处理大量数据,那分不开的即是使用Excel表格了,这里我做下学习之后的总结,望对我,及广大同仁们是一个帮助Python处理Excel数据需要用到2个库:xlwt 和 ...
- 杭电多校第九场 hdu6424 Rikka with Time Complexity 数学
Rikka with Time Complexity Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K ( ...
- 疯狂的bLue
疯狂的bLue Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 众所周知神秘的 ACM 实验 ...
- hdu 1503 Advanced Fruits 最长公共子序列 *
Advanced Fruits Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- yzoj P2043 & 洛谷 P1282 多米诺骨牌 题解
题意 类似于就是背包. 解析 代码 跟解析有点不一样v[i]价值,w[i]重量,s背包容积,背包转移即可. #include<bits/stdc++.h> using namespace ...
- Spring boot 自定义 Resolver 支持 interface 类型参数
在编写 RestController 层的代码时,由于数据实体类定义了接口及实现类,本着面向接口编程的原则,我使用了接口作为 RestController 方法的入参. 代码大致如下(省略具体业务部分 ...
- MicroPython TPYBoard v102 无线红外遥控舵机(基于红外解/编码模块)
转载请注明文章来源,更多教程可自助参考docs.tpyboard.com,QQ技术交流群:157816561,公众号:MicroPython玩家汇 红外解码/编码模块介绍 模块上搭载了红外接收头.红外 ...