vue3中父div设置display flex,2个子div重叠

在Vue 3中,若要设置父div使用flex布局并且使得2个子div重叠,可以在父div上使用样式display: flex以及position: relative,然后在子div上使用position: absolute来定位。

<template>
  <div class="parent">
    <div class="child child1">Child 1</div>
    <div class="child child2">Child 2</div>
  </div>
</template>
 
<script>
export default {
  // Vue 3 组件选项
};
</script>
 
<style>
.parent {
  display: flex;
  position: relative;
  width: 100%;
  height: 200px; /* 父div的高度 */
}
 
.child {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.child1 {
  background-color: red;
}
 
.child2 {
  background-color: blue;
  /* 将第二个子div向右移动,以显示出重叠效果 */
  right: 0;
}
</style>

div设置了display: flex来使用flexbox布局。两个子div通过position: absolute被绝对定位于父div的同一位置,并且通过right: 0属性使得第二个子div被推到了父div的右侧,从而实现重叠

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/921353.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【8210A-TX2】Ubuntu18.04 + ROS_ Melodic + TM-16多线激光 雷达评测

简介&#xff1a;介绍 TM-16多线激光雷达 在8210A载板&#xff0c;TX2核心模块环境&#xff08;Ubuntu18.04&#xff09;下测试ROS驱动&#xff0c;打开使用RVIZ 查看点云数据&#xff0c;本文的前提条件是你的TX2里已经安装了ROS版本&#xff1a;Melodic。 大家好&#xff0c;…

计算机毕设-基于springboot的高校网上缴费综合务系统视频的设计与实现(附源码+lw+ppt+开题报告)

博主介绍&#xff1a;✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围&#xff1a;Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…

在 macOS 和 Linux 中,波浪号 `~`的区别

文章目录 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~macOS示例 Linux示例 区别总结其他注意事项示例macOSLinux 结论 2、root 用户的主目录通常是 /root解释示例切换用户使用 su 命令使用 sudo 命令 验证当前用户总结 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~ 在 macO…

【SQL Server】华中农业大学空间数据库实验报告 实验九 触发器

1.实验目的 通过实验课程与理论课的学习深入理解掌握的触发器的原理、创建、修改、删除、基本的使用方法、主要用途&#xff0c;并且可以在练习的基础上&#xff0c;熟练使用触发器来进行数据库的应用程序的设计&#xff1b;深入学习深刻理解与触发器相关的T-SQL语句的编写的基…

小程序24-滚动效果:scroll-view组件详解

在微信小程序中如果想实现内容滚动&#xff0c;需要使用 scroll-view 组件 scroll-view&#xff1a;可滚动视图区域&#xff0c;适用于需要滚动展示内容的场景&#xff0c;用户可以通过手指滑动或者点击滚动条滚动内容。 scroll-x允许横向滚动scroll-y允许纵向滚动 实现横向…

Leetcode 分发糖果

这段代码的算法思想是 贪心算法&#xff0c;通过两次遍历&#xff0c;分别从左到右、从右到左调整糖果分配&#xff0c;以满足题目中相邻评分较高的孩子必须获得更多糖果的要求&#xff0c;并最终计算出最少需要分配的糖果总数。 以下是代码的详细思想与执行过程&#xff1a; …

39页PDF | 毕马威_数据资产运营白皮书(限免下载)

一、前言 《毕马威数据资产运营白皮书》探讨了数据作为新型生产要素在企业数智化转型中的重要性&#xff0c;提出了数据资产运营的“三要素”&#xff08;组织与意识、流程与规范、平台与工具&#xff09;和“四重奏”&#xff08;数据资产盘点、评估、治理、共享&#xff09;…

【Redis_Day5】String类型

【Redis_Day5】String类型 String操作String的命令set和get&#xff1a;设置、获取键值对mset和mget&#xff1a;批量设置、获取键值对setnx/setex/psetexincr和incrby&#xff1a;对字符串进行加操作decr/decrby&#xff1a;对字符串进行减操作incrbyfloat&#xff1a;浮点数加…

linux安装mysql57——笔记

rpm -qa | grep mysql有东西就rpm -e 文件名 下载 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm安装 yum -y install mysql57-community-release-el7-10.noarch.rpm安装 yum -y install mysql-community-server如果出现Error: GPG c…

基于Java Springboot高校会议室预订管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

基于 NCD 与优化函数结合的非线性优化 PID 控制

基于 NCD 与优化函数结合的非线性优化 PID 控制 1. 引言 NCD&#xff08;Normalized Coprime Factorization Distance&#xff09;优化是一种用于非线性系统的先进控制方法。通过将 NCD 指标与优化算法结合&#xff0c;可以在动态调整控制参数的同时优化控制器性能。此方法特别…

数据库表设计范式

华子目录 MYSQL库表设计&#xff1a;范式第一范式&#xff08;1NF&#xff09;第二范式&#xff08;2NF&#xff09;第三范式&#xff08;3NF&#xff09;三范式小结巴斯-科德范式&#xff08;BCNF&#xff09;第四范式&#xff08;4NF&#xff09;第五范式&#xff08;5NF&…

中国省级新质生产力发展指数数据(任宇新版本)2010-2023年

一、测算方式&#xff1a;参考C刊《财经理论与实践》任宇新&#xff08;2024&#xff09;老师的研究&#xff0c;新质生产力以劳动者劳动资料劳动对象及其优化组合的质变为 基本内涵&#xff0c;借 鉴 王 珏 和 王 荣 基 的 做 法构建新质生产力发展水平评价指标体系如下所示&a…

【爬虫】Firecrawl对京东热卖网信息爬取(仅供学习)

项目地址 GitHub - mendableai/firecrawl: &#x1f525; Turn entire websites into LLM-ready markdown or structured data. Scrape, crawl and extract with a single API. Firecrawl更多是使用在LLM大模型知识库的构建&#xff0c;是大模型数据准备中的一环&#xff08;在…

Admin.NET框架前端由于keep-alive设置缓存导致的onUnmount未触发问题

bug版本&#xff1a;next分支&#xff0c;基于.NET6版本&#xff1b; 问题描述&#xff1a; 1、添加keep-alive后&#xff0c;在其下运行的组件会出现onActived(被关注时)和onDeactived(取消关注时)生命周期&#xff0c;而组件原有生命周期为onMounted(被创造时)和onUnmounted(…

机器学习day7-线性回归3、逻辑回归、聚类、SVC

7欠拟合与过拟合 1.欠拟合 模型在训练数据上表现不佳&#xff0c;在新的数据上也表现不佳&#xff0c;常发生在模型过于简单无法处理数据中的复杂模式时。 特征&#xff1a; 训练误差较高 测试误差也高 模型过于简化&#xff0c;不能充分学习训练数据中的模式 2.过拟合 …

【鸿蒙开发】第二十二章 IPC与RPC进程间通讯服务

目录 1 IPC与RPC通信概述 2 实现原理 3 约束与限制 4 使用场景 5 开发步骤 5.1 Native侧开发步骤 5.2 ArkTS侧开发步骤 6 远端状态订阅开发实例 6.1 使用场景 6.1.1 Native侧接口 6.2 ArkTS侧接口 6.3 Stub感知Proxy消亡&#xff08;匿名Stub的使用&#xff09; 1 …

【开发小技巧11】用经典报表实现badge list效果,根据回显内容用颜色加以区分

之前使用badge list实现首页指标数据回显&#xff0c;但是无法根据对应数据进行个性化动态展示&#xff0c;那要如何解决呢&#xff1f;下面就来看看如何通过经典报表实现badge list效果&#xff0c;根据回显内容用颜色加以区分。 普通经典报表 想要做成类似这样的效果并且能…

rust中解决DPI-1047: Cannot locate a 64-bit Oracle Client library问题

我们在使用rust-oracle crate连接oracle进行测试的过程中&#xff0c;会发现无法连接oracle&#xff0c;测试运行过程中抛出“DPI-1047: Cannot locate a 64-bit Oracle Client library”错误。该问题是由于rust-oracle需要用到oracle的动态连接库&#xff0c;我们通过安装orac…

cocos creator 3.8 一些简单的操作技巧,材质的创建 1

这是一个飞机的3D模型与贴图 导入到cocos中&#xff0c;法线模型文件中已经包含了mesh、material、prefab&#xff0c;也就是模型、材质与预制。界面上创建一个空节点Plane&#xff0c;将模型直接拖入到Plane下。新建材质如图下 Effect属性选择builtin-unlit&#xff0c;不需…