我正在制作一个FQA页面，当我点击问题时，我希望在问题下方弹出答案。一切都很好，只是当我点击问题时，答案会显示出来，但问题是页面向下滚动了一点，问题被分解到顶部，对用户不友好。
现在我将展示：点击之前
提问后点击正如你所看到的，答案正在显示，但滚动会自动向下移动，这会隐藏问题，你必须向上滚动一点才能查看。
正如你所看到的，当我向上滚动时，一切都很好，但我想修复这个
这是我的html和css代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FQA</title>
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<style>
*,
*::before,
*::after
{
margin: 0;
padding: 0;
box-sizing: inherit;
}
html
{
font-family: 'Roboto', sans-serif;
font-size: 10px;
box-sizing: border-box;
}
section
{
width: 100%;
background-color: #03a9f4;
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
padding-bottom: 20px;
}
.container
{
width: 100%;
max-width: auto;
margin: 0 auto;
padding: 0 1.5rem;
}
.accordion-item
{
background-color: #283042;
border-radius: .4rem;
margin-bottom: 1rem;
padding: 1rem;
box-shadow: .5rem 2px .5rem rgba(0,0,0,.1);
}
.accordion-link
{
font-size: 1.6rem;
color: rgba(255,255,255,.8);
text-decoration: none;
background-color: #283042;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
}
.accordion-link i
{
color: #e7d5ff;
padding: .5rem;
}
.accordion-link .ion-md-remove
{
display: none;
}
.answer
{
max-height: 0;
overflow: hidden;
position: relative;
background-color: #212838;
transition: max-height 650ms;
}
.answer::before
{
content: "";
position: absolute;
width: .6rem;
height: 90%;
background-color: #8fc460;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.answer p
{
color: rgba(255,255,255,.6);
font-size: 1.4rem;
padding: 2rem;
}
.accordion-item:target .answer
{
max-height: 20rem;
}
.accordion-item:target .accordion-link .ion-md-add
{
display: none;
}
.accordion-item:target .accordion-link .ion-md-remove
{
display: block;
}
.header {
padding: 70px;
text-align: center;
background:
background-repeat: no-repeat;
background-size: cover;
color: black;
}
.header h1 {
font-size: 40px;
}
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1 style="font-size:80px">FQA</h1>
</div>
<div class="navbar">
<br>
</div>
<section>
<div class="container">
<div class="accordion">
<div class="accordion-item" id="question1">
<a class="accordion-link" href="#question1">
Сколько мне должно быть лет, чтобы арендовать машину в Бургас?
<i class="icon ion-md-add"></i>
<i class="icon ion-md-remove"></i>
</a>
<div class="answer">
<p>В большинстве случаев у вас должен быть минимум 23 года и минимум 3 полных стажа вождения.</p>
</div>
</div>
<div class="accordion-item" id="question2">
<a class="accordion-link" href="#question2">
Окончательны ли предложения по аренде автомобилей Бургас?
<i class="icon ion-md-add"></i>
<i class="icon ion-md-remove"></i>
</a>
<div class="answer">
<p>Да, все комиссии и сборы четко указаны в предложении.</p>
</div>
</div>
<div class="accordion-item" id="question3">
<a class="accordion-link" href="#question3">
Дополнительный водитель для аренда авто в Бургас?
<i class="icon ion-md-add"></i>
<i class="icon ion-md-remove"></i>
</a>
<div class="answer">
<p>Если в найме участвуют более одного водителя, второй и все последующие драйверы называются дополнительными.</p>
</div>
</div>
<div class="accordion-item" id="question4">
<a class="accordion-link" href="#question4">
Взимается ли плата, если вы не приедете после бронирования для аренда автомобиля в Бургас?
<i class="icon ion-md-add"></i>
<i class="icon ion-md-remove"></i>
</a>
<div class="answer">
<p>Нет, политика Fiesta Rent a Car Burgas заключается в приеме заявок (и при необходимости аннулирования) по телефону и на веб-сайте. В Fiesta Rent A Car Burgas мы не берем у вас данные кредитной карты перед арендой, поэтому нет возможности взимать с вас плату, если вы отмените бронирование для аренда авто в Бургас в последнюю минуту или не явитесь.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
常见问题解答中没有问题，但您的标题看起来像是固定的(位置：fixed；(这是隐藏在页眉后面的主要原因。简单解决方案：当第一个孩子点击时；设置页边空白顶部：50px；或者根据你的意愿。