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

前端:让一个div悬浮在另一个div之上

使用 CSS 的 position 属性和 z-index 属性

首先,将第二个 div 元素的 position 属性设为 relativeabsolute。这样可以让该元素成为一个定位元素,使得后代元素可以相对于它进行定位。

然后,将要悬浮的 div 元素的 position 属性设为 absolute,并设置 z-index 属性的值大于第二个 div 元素的值。

例如,下面的示例中,第二个 div 元素的 position 属性设置为 relative,要悬浮的 div 元素的 position 属性设置为 absolute,并且设置了 z-index 属性的值为 1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div style="position: relative; width: 200px; height: 200px;background-color: lightgray;"><p>这是第二个 div 元素</p></div><div style="position: absolute; z-index: 2; top: 50px; left: 50px;width: 100px; height: 100px; background-color: red;"><p>这是要悬浮的 div 元素</p></div></body>
</html>

http://www.lryc.cn/news/256524.html

相关文章:

  • 千锋 Vue 详细笔记整理
  • uniapp实战 —— 骨架屏
  • 【数据仓库-10】-- 数据仓库、数据湖和湖仓一体对比
  • 单臂路由与三层交换机
  • 免费的数据采集软件,最新免费的几款数据采集软件【2024】
  • nodejs微信小程序+python+PHP北京地铁票务APP-计算机毕业设计推荐 -安卓
  • zabbix 进阶
  • 【性能测试】Jmeter 配置元件(一):计数器
  • 使用Dockerfile Maven Plugin 将Docker镜像Push到AWS ECR (Elastic Container Registry)
  • ubuntu 20.04.6 server 服务器 下载与安装(配置静态IP)
  • [Linux] Apache的配置与运用
  • PHP基础 - 注释变量
  • 【图论笔记】克鲁斯卡尔算法(Kruskal)求最小生成树
  • oops-framework框架 之 多语言设置文本、精灵和骨骼动画
  • 阿里云SLB的使用总结
  • Python-pdf工具自制(合并、拆分、删除)
  • 23.12.9 《CLR via C#》 笔记7
  • input、el-input输入框输入规则
  • Qt优秀开源项目之十九:跨平台记事本Notes
  • [足式机器人]Part4 南科大高等机器人控制课 Ch03 Operator View of Rigid-Body Transformation
  • SpringBoot项目静态资源默认访问目录
  • xtu oj 1255 勾股数
  • 【ArcGIS Pro微课1000例】0051:创建数据最小几何边界范围(点、线、面数据均可)
  • Oracle 怎樣修改DB_NAME
  • git标签的管理与思考
  • ESP32网络编程-OTA方式升级固件(基于Arduino IDE)
  • 力扣-151. 反转字符串中的单词
  • VSCode Keil Assintant 联合开发STM32
  • 华为交换机基本配置
  • 每天一个Linux命令 -- (7)more命令