搜索栏不会停留在 CSS 位置的顶部：粘性属性

Question

我正试图使搜索栏停留在与position: stickydiv的顶部，但属性似乎不起作用。谷歌一下，我看到overflow: hidden和overflow: hidden的父元素可以使它无响应，如果没有指定高度，但我有一个指定的高度，所以我不认为这是它。下面是相关的CSS:

.container {
background-color: white;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 1rem;
height: 85vh;
width: 60vw;
overflow-y: scroll;
overflow-x: hidden;
margin: auto;
}
.search-bar {
position: sticky;
top: 0;
margin: 1rem 1rem;
padding: 0.5rem;
font-size: 20px;
width: 100%;
display: block;
outline: 0;
border-width: 0 0 2px;
}

注意.search-bar是.container的子元素。如果需要，这里是JSX文件(它是一个react应用程序):

import React, { useState, useEffect } from 'react';
import { average } from './utils/util.js';
import Card from './components/Card/Card';
import './App.css';
function App() {
const [loading, setLoading] = useState(true);
const [query, setQuery] = useState({ name: '', tag: '' });
const [users, setUsers] = useState([]);
const [filteredUsers, setFilteredUsers] = useState([]);
return (
<div className='container'>
<input
className='search-bar'
placeholder='Search by name'
onChange={(e) => {
setQuery({ ...query, name: e.target.value });
}}
/>
<input
className='search-bar'
placeholder='Search by tag'
onChange={(e) => {
setQuery({ ...query, tag: e.target.value });
}}
/>
{filteredUsers.map((user) => (
<Card
id={user.id}
pic={user.pic}
name={`${user.firstName} ${user.lastName}`}
email={user.email}
company={user.company}
skill={user.skill}
average={average(user.grades)}
grades={user.grades}
tags={user.tags}
onTagChange={tagChange}
/>
))}
</div>
);
}
export default App;

Answer 1

我试着在这里重现你的问题，

https://codesandbox.io/s/winter-breeze-5spod8?file=/src/styles.css

，但它似乎与您的代码工作良好。我唯一改变的是添加两个.search-bar类和height到它，因为你有两个input元素，你想要粘，他们开始重叠在一起，当我们开始滚动。

.container {
background-color: white;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 1rem;
height: 85vh;
width: 60vw;
overflow-y: scroll;
overflow-x: hidden;
margin: auto;
}
.search-bar1 {
position: sticky;
top: 0;
margin: 1rem 1rem;
padding: 0.5rem;
font-size: 20px;
width: 100%;
height: 3%;
display: block;
outline: 0;
border-width: 0 0 2px;
}
.search-bar2 {
position: sticky;
top: 5.8%;
margin: 1rem 1rem;
padding: 0.5rem;
font-size: 20px;
width: 100%;
height: 3%;
display: block;
outline: 0;
border-width: 0 0 2px;
}