当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，
其取值可为正整数、负整数和0。
比如： z-index: 2;
注意：
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，
亦不可指定此属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>叠放次序</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute; /* 绝对定位 */
top: 0;
left: 0;
}
div:first-child {
z-index: 1; /* font-weight: 700; */
}
div:nth-child(2) {
background-color: purple;
top: 30px;
left: 30px;
z-index: 2;
}
div:nth-child(3) {
background-color: skyblue;
top: 60px;
left: 60px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式， 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后，可以不用转换模式，直接给高度和宽度就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位盒子的模式转换</title>
<style>
div {
height: 100px;
background-color: pink;
/* float: left; 没有给盒子的宽度 浮动的盒子有模式转换的情况 转换位 行内块 */
/* position: fixed; 元素添加了 绝对定位和固定定位之后
元素模式也会发生转换 都转换位 行内块模式 */
}
span {
background-color: purple;
width: 100px;
height: 100px;
/* float: left; 如果盒子本身就需要添加 浮动后者绝对固定定位就需要转换了 */
position: absolute;
}
</style>
</head>
<body>
<div>定位盒子的模式转换</div>
<span>行内元素</span>
</body>
</html>
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，
同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的显示和隐藏</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:first-child {
/* 隐藏元素 不是删除 看不见了而已
但是元素一直存在页面中 但是不保留位置 block 显示 */
/* display: none; */
/* 隐藏元素 他和display none 最大的区别是 他保留位置 visible 显示 */
visibility: hidden;
}
div:nth-child(2) {
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标经过显示二维码</title>
<style>
div {
width: 100px;
height: 100px;
border-color: pink;
text-align: center;
line-height: 100px;
margin: 100px auto;
position: relative; /* 子绝父相 */
}
div img {
position: absolute;
left: 100px;
top: 0;
display: none; /* 隐藏二维码 */
}
div:hover img { /* 鼠标经过div的时候 里面那个img 图片会显示出来 */
display: block; /* 显示二维码 */
}
</style>
</head>
<body>
<div>
扫码登录
<img src="images/erweima.png" alt="">
</div>
</body>
</html>
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow属性</title>
<style>
div {
width: 100px;
height: 200px;
border: 1px solid red;
/*overflow: visible; 默认的 超出显示 */
/* overflow: auto; 自动 超出就显示滚动条 不超出不显示 */
/* overflow: scroll; 一直显示滚动条 */
overflow: hidden; /* 溢出隐藏 */
}
</style>
</head>
<body>
<div>
俄宇航员在国际空间站外面捡垃圾，捞了条漂了10年的毛巾
俄宇航员在国际空间站外面捡垃圾，捞了条漂了10年的毛巾
俄宇航员在国际空间站外面捡垃圾，捞了条漂了10年的毛巾
</div>
</body>
</html>
