在交互设计上，一个搜索结果页，在用户浏览结果时，搜索条件有一个吸顶状态。吸顶栏里需要加一个标题，这个标题有2个层级，比如【人才库-高级搜索】。希望像面包屑一样能够展示清层级关系，但是父级不需要可点击。我该如何设计这个标题？或者用什么符号表示两个字段的层级关系？

使用面包屑导航展示层级关系

在设计搜索结果页的吸顶栏时，可以使用面包屑导航来清晰地展示层级关系。面包屑导航是一种常见的层级展示方式，它通过分隔符将不同层级的标题连接起来，用户可以直观地看到当前页面在整体结构中的位置。

设计细节

• 标题层级：将标题分为两个层级，如“人才库-高级搜索”。
• 不可点击的父级：父级标题“人才库”设置为不可点击，以表明用户当前所在的位置。
• 分隔符：使用常见的分隔符，如“>”或“/”，来表示层级关系。

实现方法

• CSS样式：使用position: fixed确保标题栏在页面滚动时保持在顶部。
• HTML结构：使用无链接的<span>标签来包裹父级标题，子级标题使用<a>标签包裹，并设置相应的CSS样式。

示例代码

<div class="fixed-search-bar">
  <span>人才库</span><span>></span><a data-index="0" href="/search">高级搜索</a>
</div>

.fixed-search-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.fixed-search-bar span {
  font-weight: bold;
}
.fixed-search-bar a {
  color: #007bff;
  text-decoration: none;
}

[要点关键词]：面包屑导航2 [空行]

[要点关键词]：分隔符2 [空行]

[要点关键词]：CSS样式911 [空行]

[要点关键词]：HTML结构11 [空行]