21.z-index
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="imag/a.png" alt=""></li>
<li class="tipText">学习前端</li>
<li class="tipBg"></li>
<li>2021-02-09</li>
<li>江西丰城</li>
</ul>
</div>
</body>
</html>
css:
#content{
width: 350px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border:2px solid red;
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 350px;
height: 25px;
top:62px
}
.tipText{
color: white;
z-index: 1;
}
.tipBg{
background: #e98f6b;
/*opacity: 0.5;*/
}
/*
1.图层 z-index:0~999 默认0 最高999
2.透明度 opacity:0~1
*/
运行结果：
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
