html - 将整个 div 覆盖到仅具有 flexbox 的容器
问题描述
我一直在尝试让一个 div 覆盖 div 中的内容,并且只覆盖那个 div,而不是整个页面。
我试过使用它,但它实际上覆盖了整个页面。我怎样才能让它只覆盖父母?
HTML 看起来像:
<div class="document-drag-and-drop-container">
<form novalidate [formGroup]="form">
<div class="col-sm-12 col-md-4 col-lg-3">
<app-textbox label="Name" formControlName="name"></app-textbox>
</div>
<div class="col-sm-12 col-md-4 col-lg-3">
<input type="file">
</div>
<div class="drag-and-drop-overlay hidden">
<h3>Drop Document Here</h3>
</div>
</form>
</div>
CSS:
.drag-and-drop-overlay{
flex: 1 1 0%;
display: flex;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin:10px 25px 25px 25px;
border:9px solid @accent-color4;
border-radius: 5px;
background-color: #C8C8C8;
opacity: 80%;
justify-content: space-around;
}
解决方案
position: relative;
只需为您要覆盖的 div添加 CSS ,让您的覆盖层知道它可以使用哪个区域。我认为您在这里要做的就是添加:
.document-drag-and-drop-container {
position: relative;
}
推荐阅读
- amazon-ec2 - 使用 AWS Batch 服务部署 Spring 批处理应用程序会是一个好的设计吗?
- sed - 消除跨行重复的单词
- apache - 查询 Elasticsearch 时如何解决 CORS 问题?
- windows - 由于找不到客户端,可能导致 UDP 数据包未发送?
- sqlite - SQLite UPDATE 现在工作或者我做错了
- ruby-on-rails - 用 Webpacker 反应 Rails 不热重载
- selenium - 单击元素一次会出错,单击两次会正常,为什么?(量角器)
- string - 在 powershell 中使用通过引用传递的字符串时,如何访问它的值?
- regex - React - replace() 无法将符号更改为字母
- c - 如何在某个字符之后从字符串中提取子字符串?