DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

最新推荐文章于 2023-11-27 16:16:01 发布
最新推荐文章于 2023-11-27 16:16:01 发布
阅读量9k 收藏 21
点赞数 4
分类专栏： 前端html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/senge_com/article/details/90486957
版权

DIV重叠 CSS让DIV层叠、叠加，CSS让两个DIV或多个DIV按顺序重叠叠加篇

让DIV重叠并按想要顺序重叠需要CSS来实现，即CSS绝对定位进行实现。

重叠样式需要主要CSS样式解释
1、z-index 重叠顺序属性
2、position:relative和position:absolute设置对象属性为可定位（可重叠）
3、left right top bottom绝对定位具体位置设置

配合的样式
1、css width
2、css height
3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别

接下来我们为大家奉上DIV按自己意愿重叠、叠加实例布局。我们新建4个DIV盒子，一个大的DIV盒子，CSS命名为“.div-relative”，三个小DIV盒子放于第一个大DIV对象盒子内，DIV命名分别为“.div-a”、“.div-b”、“.div-c”。

一、未排序、为排顺序DIV层叠重叠实例   -   TOP
1、完整HTML源代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>div重叠 叠加实例 排层叠顺序</title>
    <style>
        .div-relative {
            position: relative;
            color: #000;
            border: 1px solid #000;
            width: 500px;
            height: 400px
        }
        
        .div-a {
            position: absolute;
            left: 30px;
            top: 30px;
            z-index: 100;
            background: #F00;
            width: 200px;
            height: 100px
        }
        /* div背景色为红色 */
        
        .div-b {
            position: absolute;
            left: 50px;
            top: 60px;
            z-index: 80;
            background: #FF0;
            width: 400px;
            height: 200px
        }
        /* 背景为黄色 */
        
        .div-c {
            position: absolute;
            left: 80px;
            top: 80px;
            z-index: 70;
            background: #00F;
            width: 300px;
            height: 300px
        }
        /* 背景为蓝色 */
    </style>
</head>

<body>
    <div class="div-relative">
        <div class="div-a">我背景为红色</div>
        <div class="div-b">我背景为黄色</div>
        <div class="div-c">我背景为蓝色</div>
    </div>
</body>

</html>

2、未排DIV层叠顺序 div+css实例截图

实现DIV层层叠重叠（未排顺序）实例截图

4、实例说明：
我们使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在html顺序，我们还可以使用css z-index实现DIV层排列顺序。

二、通过CSS控制DIV重叠顺序   -   TOP
我们使用以上绝对定位实例代码，只需要对“.div-a”、“.div-b”、“.div-c”分别加入z-index样式即可实现任意顺序排列。

扩展知识：
z-index的值为正整数值，数字越大对应对象层越浮上层（越靠前。

以上实例默认顺序是“.div-c”浮在最上层（蓝色背景层）、“.div-b”浮在中层（黄色背景层）、“.div-a”排最底层（红色背景层）。我们接下来使用z-index样式在不改变html代码情况下实现顺序颠覆，“.div-b”浮在中层（黄色背景层）排序不变，实现“.div-a”浮在最上层（红色背景层）、“.div-c”排最底层（蓝色背景层）。

1、实现按意愿排列DIV层叠重叠顺序完整HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>div重叠 叠加实例 未排层叠顺序</title>
    <style>
        .div-relative {
            position: relative;
            color: #000;
            border: 1px solid #000;
            width: 500px;
            height: 400px
        }
        
        .div-a {
            position: absolute;
            left: 30px;
            top: 30px;
            background: #F00;
            width: 200px;
            height: 100px
        }
        /* css注释说明： 背景为红色 */
        
        .div-b {
            position: absolute;
            left: 50px;
            top: 60px;
            background: #FF0;
            width: 400px;
            height: 200px
        }
        /* 背景为黄色 */
        
        .div-c {
            position: absolute;
            left: 80px;
            top: 80px;
            background: #00F;
            width: 300px;
            height: 300px
        }
        /* DIV背景颜色为蓝色 */
    </style>
</head>

<body>
    <div class="div-relative">
        <div class="div-a">我背景为红色</div>
        <div class="div-b">我背景为黄色</div>
        <div class="div-c">我背景为蓝色</div>
    </div>
</body>

</html>

2、div层叠顺序实例截图

实现红背景的“div-a”与蓝色背景“div-c”层叠顺序替换实例截图

4、我们在不改变第一个实例的HTML代码下，对“div-a”、“div-b”、“div-c”绝对定位实施后加入z-index实现层叠顺序改变。

三、DIV重叠总结   -   TOP
要实现DIV重叠，并改变实现DIV盒子层叠重叠顺序，我们对父级使用position:relative,对子级使用position:absolute、z-index（重叠顺序）、left，right，top，bottom绝对定位相当于父级具体位置。

影孓
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
两个div重叠显示
qq_35359474的博客
08-11 274
想要将兄弟div元素进行重叠 将父元素position设置为relative,子元素position设置为absolute。使用z-index设置谁显示在上层、谁显示在下层。
css+div 控件重叠，子控件隐藏
最新发布
我的专栏
06-21 118
https://blog.51cto.com/u_16281588/9721961
html怎么让两个div重叠,两个DIV或多个DIV顺序重叠加
weixin_39843093的博客
05-30 5474
DIV堆叠 CSS让DIV层叠、叠加，CSS让两个DIV或多个DIV按程序堆叠叠加篇让DIV重叠并按想要举措重叠须要CSS来实现，即CSS绝对定位发展实现。重叠格局必要主要CSS名目抒发1、z-index重叠挨次属性2、position:relative和position:absolute设置装备摆设对象属性为可定位(可堆叠)3、left right top bottom绝对定位详细位子设置配合...
两个div重叠在一起
weixin_40058289的博客
11-27 493
div 重叠
div+css实现div的多层重叠，并且居中显示
11-04
我们在制作网页时，有时需要多重div的重叠，每个div添加不同的内容，以实现特殊的层叠效果，这个如何实现，在网上没找到现成的详细的教程，但是可以用现有的知识，自己摸索哦。终于成功了，O(∩_∩)O~ 分享出来。...
用一个DIV画图通过background-image叠加实现
12-13
这是一个CSS属性，允许我们将多个背景图像设置在一个元素上。这些图像会按照声明的顺序进行叠加，就像层一样。在这个案例中，`div`元素的背景是由几个渐变叠加组成的，从而创建出所需的形状和效果。 1. **径向渐变...
通过绝对定位实现div重叠实例代码
12-10
div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title> <style> .div-relative {position: absolute;color: #000;border: 1px solid #000;width: 500px;height: 400px;right: 0;bottom: 0;} .div-a {...
CSS两张图片叠加透明显示特效
07-14
在CSS中，`blend-mode`允许我们将两个或多个图像元素以不同的混合模式进行组合，创造出视觉上丰富的效果。这个属性借鉴了传统图形编辑软件中的混合模式概念，如Photoshop。通过调整不同的混合模式，我们可以让图片...
纯css3信封爱心封口动画特效
07-24
我们可以创建两个圆形的`div`，一个稍大，一个稍小，重叠部分形成心形的顶部，然后添加一个矩形作为底部。利用`::before`和`::after`伪元素可以简洁地完成这个任务。 ```css .heart { width: 60px; height: 60px;...
CSS3笔记1
08-03
当一个元素设置有多个背景图片时，它们会按照声明的顺序进行叠加。第一张图片位于最底层，最后一张位于最顶层。这种现象被称为“先占先得”原则。例如： ```css element { background-image: url(image1.png), ...
css3极简代码绘制奥运五环
10-09
在前端开发领域，CSS3（层叠样式表第三版）是一种强大的工具，它极大地扩展了网页设计的可能性。本文将深入探讨如何使用CSS3极简代码来绘制奥运五环，这是一项展示前端技术趣味性和魅力的任务。 首先，让我们理解...
gallery重叠特效源码+注释.rar
09-09
在这个gallery中，每个图片元素可能被封装在一个特定的div容器内，通过CSS类来控制它们的位置和重叠状态。 2. **CSS 样式**：CSS（层叠样式表）是实现重叠效果的核心。它通过定位（positioning）、z-index（层级）...
让两个子div重叠在一起的实现
weixin_30394633的博客
08-31 4173
需求： 　　需要添加两个div，鼠标未移上是显示第一个，鼠标移上后，显示出来第二个半透明的。这两个div在同一位置上。 实现： 第一步：最外面包围的div Html代码： <div class="Main"> </div> CSS代码： .Main{ width: 220px; height: 120px; ...
html div文字重叠,div右边的div与其重叠（显示错位）
weixin_36202603的博客
05-30 2101
在排版布局网页时，一行常常分为两列或三列，由于是一个大区块，所以经常使用div来布局，也就是每列用一个div。假如把一行分为两列，一列用于显示文字列表，另一列用于显示图片列表，图文搭配比较好看；在用div布局的时候可能会出现这么一种情况：第二列的div会与第一列的div重叠，即div右边的div与其重叠，也就是第二列的div显示错位了。为什么会出错位这种情况？这与CSS的定义有关，也有浏览器的版本...
div层的叠加效果
∧︵∧全世界的屋顶 ∧︵∧
05-22 1211
貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。 首先明确几点在文中所需要用到的概念： 静态定位：position:static（为position属性的默认值）。 动态定位：positio
qt 当有多个qdockwidget重叠时,如何判定选中的qdockwidget
07-20
### 回答1： 在Qt中，可以通过设置QDockWidget的属性来判断选中的QDockWidget。当多个QDockWidget重叠时，可以通过设置setDockNestingEnabled()函数来启用QDockWidget的嵌套功能，确保可选择的QDockWidget会自动前置显示。 首先，我们需要设置QMainWindow的DockNestingEnabled属性为True，以便允许QDockWidget重叠。然后，在创建QDockWidget时，需要设置setFeatures()函数，并将其参数设置为QDockWidget的可选特性。 在选中QDockWidget时，可以使用QMainWindow的currentChanged()信号，该信号在选择Dock区域中的QDockWidget时触发。可以连接此信号到一个槽函数，以捕获选中的QDockWidget，并进行相应处理。 以下是一个示例代码： ```cpp #include <QtWidgets> int main(int argc, char *argv[]) { QApplication app(argc, argv); QMainWindow mainWindow; // 设置QMainWindow的属性以支持DockWidget重叠 mainWindow.setDockNestingEnabled(true); QDockWidget *dockWidget1 = new QDockWidget("Dock Widget 1"); QDockWidget *dockWidget2 = new QDockWidget("Dock Widget 2"); // 设置QDockWidget的特性 dockWidget1->setFeatures(QDockWidget::DockWidgetMovable | QDockWidget::DockWidgetFloatable); dockWidget2->setFeatures(QDockWidget::DockWidgetMovable | QDockWidget::DockWidgetFloatable); mainWindow.addDockWidget(Qt::TopDockWidgetArea, dockWidget1); mainWindow.addDockWidget(Qt::TopDockWidgetArea, dockWidget2); // 连接currentChanged信号到槽函数 QObject::connect(mainWindow, &QMainWindow::currentChanged, [&](QWidget *widget) { QDockWidget *selectedDockWidget = qobject_cast<QDockWidget*>(widget); if (selectedDockWidget) { qDebug() << "Selected Dock Widget: " << selectedDockWidget->windowTitle(); } }); mainWindow.show(); return app.exec(); } ``` 在此示例中，我们创建了两个可选的QDockWidget并添加到TopDockWidgetArea。通过设置QDockWidget的可移动和可浮动特性，我们允许用户选择和移动这些QDockWidget。 通过连接QMainWindow的currentChanged信号到一个槽函数，我们可以捕获选中的QDockWidget，并使用windowTitle()函数获取选中QDockWidget的标题，以进行进一步处理。 总结：通过设置QDockWidget的特性并连接QMainWindow的currentChanged信号，我们可以判断选中的QDockWidget并执行相应操作。 ### 回答2： 在Qt中，当多个QDockWidget重叠在一起时，可以使用以下方法来判定选中的QDockWidget。 1. 使用QMainWindow的method函数`tabifiedDockWidgets`来获取重叠在一起的QDockWidget。此函数返回一个包含所有重叠的QDockWidget的列表。 2. 通过在QMainWindow中使用`activateNextTabbedDockWidget`和`activatePreviousTabbedDockWidget`方法，来切换选中的QDockWidget。这些方法可以实现在重叠的QDockWidget之间进行切换。 3. 使用QDockWidget的`setStyleSheet`方法，通过设置不同的样式表来突出显示选中的QDockWidget。可以为选中的QDockWidget设置不同的背景颜色或者边框样式，以便它与其他重叠的QDockWidget区分开。 4. 可以使用QDockWidget的`setObjectName`方法为每个QDockWidget设置唯一的名称。当需要判断选中的QDockWidget时，可以通过遍历所有的QDockWidget，并使用`objectName`属性来比较查找到的QDockWidget与选中的QDockWidget是否名称相同。 例如，可以使用以下代码来实现判断选中的QDockWidget： ```cpp // 获取所有重叠的QDockWidget QList<QDockWidget*> dockWidgets = mainWindow->tabifiedDockWidgets(dockWidget); // 切换选中的QDockWidget mainWindow->activateNextTabbedDockWidget(); mainWindow->activatePreviousTabbedDockWidget(); // 为选中的QDockWidget设置样式表 selectedDockWidget->setStyleSheet("background-color: yellow;"); otherDockWidget->setStyleSheet("background-color: none;"); // 通过名称判断选中的QDockWidget for(QDockWidget* dock : dockWidgets){ if(dock->objectName() == selectedDockWidget->objectName()){ // 选中的QDockWidget } else { // 其他重叠的QDockWidget } } ``` 通过以上方法，可以在多个QDockWidget重叠时判断选中的QDockWidget，并对其进行特殊处理。 ### 回答3： 当有多个QDockWidget重叠时，我们可以通过以下方法来判断选择的QDockWidget： 1. 使用QDockWidget的dockWidgetArea()函数：QDockWidget类有一个dockWidgetArea()函数，用于返回QDockWidget所在的区域。可以通过判断不同QDockWidget的区域来确定哪一个是选中的。 2. 使用QApplication的widgetAt()函数：QApplication类有一个widgetAt()函数，用于返回指定屏幕坐标处的部件。我们可以使用鼠标点击事件的坐标作为参数传入widgetAt()函数，然后判断返回的部件是否为QDockWidget类型，如果是，则表示选中了该QDockWidget。 3. 使用QMainWindow的tabifiedDockWidgets()函数：QMainWindow类有一个tabifiedDockWidgets()函数，用于返回指定QDockWidget所属的QTabBar的所有QDockWidget。我们可以遍历tabifiedDockWidgets()函数返回的列表，判断某个QDockWidget是否选中。 4. 使用QDockWidget的features()函数：QDockWidget类有一个features()函数，用于返回QDockWidget的特性。我们可以通过判断每个QDockWidget的features()函数的返回值是否为QDockWidget::DockWidgetFeature::DockWidgetClosable来确定该QDockWidget是否选中，因为只有选中的QDockWidget的特性中有DockWidgetClosable。 总之，根据不同的需求和具体场景，可以选用以上其中的一种或结合使用的方法来判断选中的QDockWidget。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

影孓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值