回顾

定位
position 属性规定应用于元素的定位方法的类型
定位分为相对定位和绝对定位

层级示例

z-index 属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Z-index 可用于将在一个元素放置于另一元素之后。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级z-index</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="app1">
    <ul id="ul1">
        <li><img src="images/桐老爷tx.jpeg" alt=""></li>
        <li id="tipText">刀剑神域桐老爷</li>
        <li id="tipBg"></li>
        <li>Alice默默祝福</li>
        <li>时间：2022-2-14</li>
    </ul>
</div>
<hr>
<div id="app2">
    <ul id="ul2">
        <li id="tipText2">刀剑神域桐老爷</li>
        <li>Alice默默祝福</li>
        <li>时间：2022-2-14</li>
    </ul>
</div>

css

	div[id^=app]{
    border: 2px black solid;
}
#ul1 li{
    margin: 0;
    padding: 0;
    list-style: none;
}
#app1{
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 180px;
    height: 220px;
    font: 20px bold;
    line-height: 20px;
}
#ul1{
    position: relative;
    margin: 0;
    padding: 0;
}
#tipBg,#tipText{
    text-align: center;
    position: absolute;
    width: 175px;
    height: 20px;
    bottom: 40px;
    line-height: 20px;
}
#tipBg{
    background: red;
    /*透明度
    opacity: 0.4;*/
}
#tipText{
    color: white;
    z-index: 99;
}
/*====================================================*/
#app2{
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 180px;
    height: 220px;
    font: 20px bold;
    line-height: 20px;
    background-image: url("../images/桐老爷tx.jpeg");
    background-repeat: no-repeat;
    position: relative;
}
#ul2 li{
    margin: 0;
    padding: 0;
    list-style: none;
}
#ul2{
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 4px;
    left: -1px;
}
#tipText2{
    text-align: center;
    width: 175px;
    height: 20px;
    line-height: 20px;
    background: red;
    color: white;
}