css - 固定标题 - 输入字段的锚点

Question

我的页面有一个固定的标题。

当用户在提交表单时没有通过表单验证时，我会在表单上方显示一个错误列表，每个错误都带有指向产生错误的表单元素的链接。

但是，当我单击指向锚点的链接时，该元素被固定标题隐藏。

我见过许多使用伪类:before来解决这个问题的 css 解决方案，但是这不能应用于输入元素。

是否有基于 css 的替代解决方案，或者我是否被迫创建一个 JS 解决方案？

提前致谢

Answer 1

包含所有错误消息的容器，您可以将其设置为padding-top等于标题的高度。然后它将偏移列表。您将不得不玩弄 px 以使其看起来正确。这不是一个完美的解决方案，但它是一个简单的解决方案。

这是一个简单的示例，因为您没有提供任何代码：

HTML

<div id="header">
    Fixed Header
</div>
<div id="error">
    <ul>
        <li>Error One</li>
        <li>Error Two</li>
        <li>Error Three</li>
    </ul>
</div>

CSS

#header { 
    background-color: #ccc;
    position: fixed;
    height: 50px;
    width: 100%;
}

#error {
    padding-top: 50px;
}

这里是jsfiddle 形式。希望我正确理解了这个问题。