网站面包屑

Question

我在网站上工作，想添加带有边框半径的面包屑。我在尝试使它看起来像具有第 2 个和第 3 个 child z 索引的面包屑时遇到了麻烦。我想要实现的是上一个列表下的第 2 个和第 3 个 child。

JS Fiddle http://jsfiddle.net/1cnh7bz7/1/

这是我的代码

.uk-breadcrumb > li {
  font-size: 1rem;
  vertical-align: top;
  border: 1px solid #000000;
  border-radius: 500px;
  padding: 0 15px;
  background: #ffffff;
  margin-left: -20px;
}

.uk-breadcrumb > li,
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span {
  display: inline-block;
  z-index: 1;
}
.uk-breadcrumb .uk-active {
  background: #eeeeee;
  border: 1px solid #eeeeee;
  z-index: 2;
}
<div class="bh-breadcrumbs">
<ul class="uk-breadcrumb uk-hidden-small">
    <li><a href="#">Home</a></li>
    <li><a href="#" title="Culture">Culture</a></li>
    <li class="uk-active"><span>arts</span></li>
</ul>  
</div>

任何帮助都适用

Answer 1

我对 z-index 进行了一些修改以使其正常工作。首先，你在玩 z-index 时没有使用位置值，所以它没有效果。请参阅第 .uk-breadcrumb > li + li 行，它以另一个 li 旁边的元素 li 为目标，并使用多个元素来确定它是第一个、第二个还是第三个，然后应用正确的 z-index。

我已经从 10 开始 z-index 但可以从任何数字开始，但是如果我们想要 4 个级别而不是 3 个级别，则从高于需要的级别开始可以更容易地添加一个级别。我相信社区可以通过 nexting 找到更好的方法来做到这一点，但这会很好地工作...

.uk-breadcrumb > li {
  font-size: 1rem;
  vertical-align: top;
  border: 1px solid #000000;
  border-radius: 500px;
  padding: 0 15px;
  background: #ffffff;
  margin-left: -20px;
}
.uk-breadcrumb > li {
  z-index: 10;
}
.uk-breadcrumb > li + li {
  z-index: 9;
}
.uk-breadcrumb > li + li+ li {
  z-index: 8;
}
.uk-breadcrumb > li,
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span {
  display: inline-block;
  position: relative;
}
.uk-breadcrumb .uk-active {
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

<div class="bh-breadcrumbs">
  <ul class="uk-breadcrumb uk-hidden-small">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#" title="Culture">Culture</a>
    </li>
    <li class="uk-active"><span>arts</span>
    </li>
  </ul>
</div>

网站面包屑

Site Breadcrumbs

html

css

breadcrumbs