CSS中div覆盖另一个div

简介: 将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位。 可以根个人情况设置z-index的值 1->position 为absolute的情况 #div1{position:absolute;width:300px;height:300px;ba...

将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位。

可以根个人情况设置z-index的值

1->position 为absolute的情况

<html>

<head>

<style>

#div1{position:absolute;width:300px;height:300px;background:#ccc;}

#div2{position:absolute;left:0;top:0;width:200px;height:200px;background:red;filter:alpha(opacity=50);}

</style>

</head>

<body>

<divid="div1">这里是div1的内容

          <divid="div2"></div>

</div>

</body>

</html>

2->用margin为负的操作

<html>
<head>
    <style>
    #div1 { position:relative; width:300px; height:300px; background:#ccc;}
    #div2 { position:relative; left:0; top:0;margin-top:-15px; width:200px; height:200px; background:red;filter:alpha(opacity=50);}
    </style>
</head>
<body>
<divid="div1"> 这里是div1的内容
          <divid="div2"></div>
</div>
</body>
</html>

目录
相关文章
vxe-table表格校验失败后保持可以编辑状态
vxe-table表格校验失败后保持可以编辑状态
vxe-table表格校验失败后保持可以编辑状态
|
前端开发
前端学习案例-WangEdit富文本编辑器增加上传视频功能
前端学习案例-WangEdit富文本编辑器增加上传视频功能
647 0
|
应用服务中间件 nginx
|
前端开发 资源调度 开发工具
AntD Admin — Ant Design 风格的中后台前端解决方案
AntD Admin  一套优秀的中后台前端解决方案。 特性 国际化,源码中抽离翻译字段,按需加载语言包 动态权限,不同权限对应不同菜单 优雅美观,Ant Design 设计体系 Mock 数据,本地数据调试 使用 1、下载项目代码。
14843 0
|
11月前
|
人工智能 Java Serverless
阿里云函数计算助力AI大模型快速部署
随着人工智能技术的快速发展,AI大模型已经成为企业数字化转型的重要工具。然而,对于许多业务人员、开发者以及企业来说,探索和利用AI大模型仍然面临诸多挑战。业务人员可能缺乏编程技能,难以快速上手AI模型;开发者可能受限于GPU资源,无法高效构建和部署AI应用;企业则希望简化技术门槛,以更低的成本和更高的效率利用AI大模型。
737 12
|
9月前
|
人工智能 自然语言处理 Shell
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
仅用3分钟,百炼调用满血版Deepseek-r1 API,享受百万免费Token。阿里云提供零门槛、快速部署的解决方案,支持云控制台和Cloud Shell两种方式,操作简便。Deepseek-r1满血版在推理能力上表现出色,尤其擅长数学、代码和自然语言处理任务,使用过程中无卡顿,体验丝滑。结合Chatbox工具,用户可轻松掌控模型,提升工作效率。阿里云大模型服务平台百炼不仅速度快,还确保数据安全,值得信赖。
358588 71
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
|
Linux 虚拟化 iOS开发
部署06--MacOS安装VMware Fusion安装
部署06--MacOS安装VMware Fusion安装
|
JavaScript 前端开发 测试技术
动态组件化的优缺点是什么
【9月更文挑战第2天】动态组件化的优缺点是什么
249 5
|
人工智能 Kubernetes Docker
打破算力瓶颈,快速部署AI大模型应用
打破算力瓶颈,快速部署AI大模型应用
|
Java 关系型数据库 MySQL
Gradle中的依赖Dependencies说明与使用总结
Gradle中的依赖Dependencies说明与使用总结
858 0