CSS学习16之层级

最新推荐文章于 2023-12-04 10:22:14 发布

小黑神zxs

最新推荐文章于 2023-12-04 10:22:14 发布

阅读量1k

点赞数

分类专栏： CSS3详解文章标签：学习 css3 前端 html z-index 属性

本文链接：https://blog.csdn.net/zxs1002/article/details/123524795

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

定位
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;
}

效果

在这里插入图片描述

小黑神zxs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习16之层级

回顾定位position 属性规定应用于元素的定位方法的类型定位分为相对定位和绝对定位层级示例z-index 属性z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 可用于将在一个元素放置于另一元素之后。html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
复制链接

扫一扫