Z-index属性详解
1.概念
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
2.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index Demo</title>
<style type="text/css">
div{
width: 200px;height: 200px;
text-align: center;
font-size: 50px;
line-height: 200px;
position: absolute;
}
#red{left: 100px;top: 100px;}
#green{left: 200px;top: 200px;}
</style>
</head>
<body>
<!-- Z-index层叠性原则：
1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。（后来居上）
2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，
即z-index越大优先级越高。 -->
<div id="red" style="background: red;z-index: 0;">A</div>
<div id="green" style="background-color: green;">B</div>
<div id="blue" style="background-color: blue;z-index: -1;">C</div>
</body>
</html>
3.参考链接
https://www.cnblogs.com/ForEvErNoME/p/3373641.html
https://blog.csdn.net/u012207345/article/details/82744505?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160907217416780308352510%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fall.%252522%25257D&request_id=160907217416780308352510&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_v2~rank_v29-3-82744505.pc_search_result_cache&utm_term=Z-index
扫一扫
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
