当前位置: 首页 > news >正文

CSS中div覆盖另一个div

将一个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>

相关文章:

  • ARRAY_SIZE宏
  • 每日记录 2016-4-29 HTML5本地存储
  • Mina.Net实现的UDP多路广播
  • 向fedora添加rpmfusion源
  • Provisioning Services 7.8 入门系列教程之二 基础环境安装
  • iOS开发UI篇—UITableviewcell的性能优化和缓存机制
  • GlobalSign 增强型(EV) SSL 证书
  • 执行搜索 《第三篇》
  • Grovvy Step byStep Examples
  • oracle通过DBlink连接mysql(MariaDB)
  • Compile FreeCAD on Windows
  • Elasticsearch-DSL(highlight) 004
  • linux-selinux安全防护,加密解密
  • Lua 笔记--编译、执行、错误与协同程序
  • 解决input file按钮要点击两次才弹出选择文件窗口
  • Android 架构优化~MVP 架构改造
  • ES学习笔记(12)--Symbol
  • express如何解决request entity too large问题
  • JS实现简单的MVC模式开发小游戏
  • Mysql数据库的条件查询语句
  • spring boot 整合mybatis 无法输出sql的问题
  • V4L2视频输入框架概述
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 入口文件开始,分析Vue源码实现
  • 使用 QuickBI 搭建酷炫可视化分析
  • 使用 Xcode 的 Target 区分开发和生产环境
  • 我有几个粽子,和一个故事
  • 用element的upload组件实现多图片上传和压缩
  • 走向全栈之MongoDB的使用
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • $.ajax中的eval及dataType
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (12)Linux 常见的三种进程状态
  • (2)STM32单片机上位机
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节(封装和窗体)
  • (附源码)springboot家庭财务分析系统 毕业设计641323
  • (理论篇)httpmoudle和httphandler一览
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (南京观海微电子)——I3C协议介绍
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (十五)Flask覆写wsgi_app函数实现自定义中间件
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (转)人的集合论——移山之道
  • .net MySql
  • .Net 中的反射(动态创建类型实例) - Part.4(转自http://www.tracefact.net/CLR-and-Framework/Reflection-Part4.aspx)...
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • .NET导入Excel数据
  • .net之微信企业号开发(一) 所使用的环境与工具以及准备工作
  • /usr/lib/mysql/plugin权限_给数据库增加密码策略遇到的权限问题
  • [ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
  • [2021ICPC济南 L] Strange Series (Bell 数 多项式exp)
  • [④ADRV902x]: Digital Filter Configuration(发射端)
  • [Android 13]Input系列--获取触摸窗口