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 ...
随机推荐
- 云原生生态周报 Vol. 17 | Helm 3 发布首个 beta 版本
本周作者 | 墨封.衷源.元毅.有济.心水 业界要闻 1. Helm 3 首个 beta 版本 v3.0.0-beta.1 发布 该版本的重点是完成最后的修改和重构,以及移植其他 Helm 2 特性. ...
- jasypt
jasypt-1.9.0.jar import org.jasypt.encryption.pbe.StandardPBEStringEncryptor; public class EncryptUt ...
- [Error]syntaxerror: non-ascii character '/xd6' in file
eclipse代码运行时显示:syntaxerror: non-ascii character '/xd6' in file 原因:如果文件里有非ASCII字符,需要在第一行或第二行指定编码声明. 解 ...
- 线段树离散化 unique + 二分查找 模板 （转载）
离散化,把无限空间中有限的个体映射到有限的空间中去,以此提高算法的时空效率. 通俗的说,离散化是在不改变数据相对大小的条件下,对数据进行相应的缩小.例如: 原数据:1,999,100000,15:处理 ...
- Atcoder C - Closed Rooms（思维+bfs）
题目链接:http://agc014.contest.atcoder.jp/tasks/agc014_c 题意:略. 题解:第一遍bfs找到所有可以走的点并标记步数,看一下最少几步到达所有没锁的点,然 ...
- java hdu A+B for Input-Output Practice (IV)
A+B for Input-Output Practice (IV) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/327 ...
- 10 UA池和代理池
在Scrapy中,引擎和下载器之间有一个组件,叫下载中间件(Downloader Middlewares).因它是介于Scrapy的request/response处理的钩子,所以有2方面作用: (1 ...
- C++中的Inline函数的使用
转载自:https://www.cnblogs.com/KellyHuang/p/4001470.html 在大多数机器上,函数调用does a lot of work:在调用函数前保存寄存器,调用结 ...
- 解决go get下载包失败问题
由于某些不可抗力的原因,国内使用go get命令安装包时会经常会出现timeout的问题.本文介绍几个常用的解决办法. 从github克隆 golang在github上建立了一个镜像库,如https: ...
- （2）RapidJson的详解及使用
本节主要介绍RapidJson是如何使用的. (1)RapidJson是什么 RapidJson是一个跨平台的c++的json的解析器和生成器: 相比较jsoncpp库,RapidJson ...