html - 具有不透明背景的重叠 div

标签 html css

<分区>

我有两个带有背景颜色的 div,一个与另一个重叠。问题是我可以通过顶部的div看到底层div的内容。

https://jsfiddle.net/jost_s/0dxwtbvn/23/

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  margin-left: 50px;
  margin-top: -50px;
  border: 1px solid white;
}
<div>AB</div>
<div class="overlapping">CD</div>

最佳答案

使用position:relative

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  margin-left: 50px;
  margin-top: -50px;
  border: 1px solid white;
  position:relative;
}
<div>
AB
</div>
<div class="overlapping">
CD
</div>

关于html - 具有不透明背景的重叠 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58629385/

上一篇:javascript - 我正在尝试制作一个可折叠菜单,一次只打开 1 个纯 javascript

下一篇:html - 滚动时保持在顶部的凹形标题

相关文章:

html - 为什么 flex-wrap : wrap not work on safari

javascript - 在 <p> 标记中的行开头折叠

javascript - 使用 Javascript 在某些 HTML 页面上添加侧边栏和更改填充

html - 无法用 css 覆盖 Bootstrap

php - 搜索mysql数据库

android - CSS div 覆盖标签在桌面版 Chrome 中运行良好,但在 Android 版 Chrome 中运行不佳

javascript - 同时使用两个 Controller 的正确方法?

javascript - 在 CSS 中将 float 图像居中

javascript - 网站中具有电子表格功能的动态表

html - CSS Transition 没有相应地工作