我正在尝试制作一个简单的搜索框,它应该在滚动时位于可搜索组件的顶部。问题是搜索框不适合外部容器,只是穿过它 (position: absolute
) 并与滚动条的 up arrow
重叠。
如何使搜索框适合外部容器(整个宽度)并且不与滚动条重叠?
.container {
border-color: rgb(221, 221, 221);
height: 140px;
text-align: left;
overflow: auto;
border: 1px solid #a0a7b2;
border-radius: 4px;
}
.outer {
position: relative;
display: block;
float: none;
width: 120px;
}
input {
border: none;
box-shadow: none;
background-color: #f1f1f1;
border-radius: 4px;
height: 18px;
display: inline-block;
width: auto;
}
.search {
background-color: #f1f1f1;
position: absolute;
width: 99%;
}
.list {
margin-top: 20px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div class="outer">
<div class="container">
<div class="search">
<input type="text"/>
</div>
<div class="list">
<ul>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ul>
</div>
</div.
</div>
</body>
</html>
最佳答案
您需要进行的更改:
- 修改
overflow为hidden in container class
并使其position:relative
。 - 将搜索和列表的
位置设置为绝对位置
。 - 将列表的
高度设置为 100%
和overflow-y:scroll
。 - 将
输入宽度
更改为 100%。
这些修改以下列方式更改代码:
您的子容器现在相对于主容器是绝对定位的。
您不会滚动主容器,而只会滚动包含无序列表的列表。
.container {
border-color: rgb(221, 221, 221);
height: 140px;
text-align: left;
border: 1px solid #a0a7b2;
border-radius: 4px;
position:relative;
overflow:hidden;
}
.outer {
position: relative;
display: block;
float: none;
width: 120px;
}
input {
border: none;
box-shadow: none;
background-color: #f1f1f1;
border-radius: 4px;
height: 18px;
width:100%;
}
.search {
background-color: #f1f1f1;
position: absolute;
width: 99%;
}
.list {
position:absolute;
margin-top: 20px;
width:100%;
height:100%;
overflow-y: scroll;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div class="outer">
<div class="container">
<div class="search">
<input type="text" />
</div>
<div class="list">
<ul>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ul>
</div>
</div. </div>
</body>
</html>
关于html - 滚动条位于绝对位置之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47874102/