CSS/JS-修复了在表单无效时滚动到输入字段的顶部栏干扰

Question

我目前正在处理表单验证。基本表单验证

每当提交一个表格，其中输入具有"；"必需"；属性，则会出现提示。

问题是，当跳转到输入字段时，固定元素没有被考虑在内(这是正确的行为(

由于我使用的是固定的标题，所以输入字段隐藏在它下面

如何解决这个问题，以便将固定导航栏考虑在内？

有关其他上下文，请参阅我的小提琴：

body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #bbb;
position: fixed;
top: 0;
width: 100%;
}

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<form>
Name: <input type="text" required>
<input type="submit" style="margin-top: 30rem; width: 100%;" value="Submit">
</form>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>

PS：CSS属性"；z索引"；不是我想要的。

Answer 1

在表单中添加一个类，然后删除溢出：隐藏在.navbar样式中。为表单类添加样式，如下所示。

这是你所期望的吗？这是关于z索引的链接：https://www.w3schools.com/css/css_z-index.asp

.navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

.formClass {
position: relative;
z-index: 1;
}

<form class="formClass" action="/action_page.php" method="get">
Name: <input type="text" name="fname" required />
<input
type="submit"
style="margin-top: 30rem; width: 100%"
value="Submit"
/>
</form>