一个div上覆盖另一个div CSS

最新推荐文章于 2024-05-13 14:29:13 发布

浪&潮

最新推荐文章于 2024-05-13 14:29:13 发布

阅读量6.1k

点赞数 2

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44546460/article/details/120724862

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

要实现此方法没有什么可做的，您要做的只是借助CSS位置属性以及z-index将一个div覆盖在另一个div元素上。但是Z-index在这里的作用是什么？好吧， Z-index用于确定定位元素的堆叠顺序。例如，位置值为以下任意值的元素：绝对，固定或相对。
Syntax:
句法：

Element{
position:absolute|fixed|relative;
z-index:value;
}

Example:

<!DOCTYPE html>
 
<html>
 
<head>
    <style>
        .box {
            width: 250px;
            height: 250px;
            position: relative;
        }
        
        .box1 {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0.8;
        }
        
        .box2 {
            z-index: 10;
            margin: 40px;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="box1" style="background: #f40;"></div>
        <div class="box1 box2" style="background: #006969;"></div>
    </div>
</body>
 
</html>

在这里插入图片描述

浪&潮

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
一个div上覆盖另一个div CSS

要实现此方法没有什么可做的，您要做的只是借助CSS位置属性以及z-index将一个div覆盖在另一个div元素上。但是Z-index在这里的作用是什么？好吧， Z-index用于确定定位元素的堆叠顺序。例如，位置值为以下任意值的元素：绝对，固定或相对。Syntax:句法：Element{position:absolute|fixed|relative;z-index:value;}Example:<!DOCTYPE html> <html> <
复制链接

扫一扫