html - 如何让div停止移动其他div而不改变css中的位置?
问题描述
我有一个下拉菜单,其中包含不同的框,当它打开时它们会一个接一个地显示,这使得其他 div 根据显示的框数向下移动。我尝试过使用position:absolute;
,但这只会弄乱盒子,即使我想要一个接一个,它们也会全部堆叠起来。
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;
300;
400;
500;
600;
700&display=swap');
::selection {
color: #fff;
background: #664AFF;
}
.wrapper {
max-width: 450px;
margin: 70px auto;
}
.wrapper .search-input {
background: #fff;
width: 100%;
border-radius: 5px;
position: relative;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.12);
}
.search-input input {
height: 55px;
width: 82%;
outline: none;
border: none;
border-radius: 5px;
padding: 0 60px 0 20px;
font-size: 18px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}
.search-input.active input {
position: absolute;
border-radius: 5px 5px 0 0;
}
.search-input .autocom-box {
padding: 0;
opacity: 0;
pointer-events: none;
max-height: 280px;
overflow-y: auto;
}
.search-input.active .autocom-box {
padding: 10px 8px;
opacity: 1;
pointer-events: auto;
}
.autocom-box li {
z-index: 99999;
list-style: none;
padding: 8px 12px;
display: none;
width: 100%;
cursor: default;
border-radius: 3px;
}
.search-input.active .autocom-box li {
display: block;
}
.autocom-box li:hover {
background: #efefef;
}
.search-input .icon {
position: absolute;
right: 0px;
top: 0px;
height: 55px;
width: 55px;
text-align: center;
line-height: 55px;
font-size: 20px;
color: grey;
cursor: pointer;
}
<!-- Search Bar -->
<div class="wrapper">
<div class="search-input">
<a href="" target="_blank" hidden></a>
<input type="text" placeholder="Search for other alternatives ...">
<div class="autocom-box">
</div>
<div class="icon"><i class="fas fa-search"></i></div>
</div>
解决方案
推荐阅读
- laravel - laravel 刀片 @include 与本地化变量
- rust - rust 在 x86_64 机器上编译 x86 库
- c# - 在 WPF 的行单元格中使用按钮和组合框
- c# - 无法将字符串转换为 XElement
- vim - Vim:保存和退出时替换字符串
- c# - Azure 通知中心管理 SDK - 缺少指标?
- php - Laravel php结合了两个foreach
- firebase - 使用 Firestore 在聊天应用中加载对话消息
- python - 试图读取 BSON 文件,得到 bson.errors.InvalidBSON: objsize too large
- odoo - Odoo 方法覆盖