Question

我有一个带有一些标签的容器：

<div class="tabbed-container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="active nav-link">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">A longer tab name</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Last tab</a>
    </li>
  </ul>
  <div class="tab-content">
    <p>
      Hey look, some content!
    </p>
    <p>
      More content!
    </p>
  </div>
</div>

body {
  background-color: white
}

*, *::after, *::before {
  box-sizing: border-box;
}

.tabbed-container {
  display: flex;
  flex-direction: column;
  margin: 2em;
  background-color: white;
}

.nav {
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  justify-content: space-between;
}

.nav-tabs .nav-item {
  margin: 0 3px -1px 3px;
  flex: 1 1 auto
}

.nav-tabs > .nav-item:first-child {
  margin-left: 0px;
}

.nav-tabs > .nav-item:last-child {
  margin-right: 0px;
}

.nav-tabs .nav-item a {
  border-radius: 10px 10px 0 0;
  padding: 1em;
  border: 0px;
  border-bottom: 1px solid transparent;
  background-color: #e4e4e4;
  text-align: center;
}

.nav-tabs .nav-item a.active,
.nav-tabs .nav-item a:active {
    background-color: white;
    border: 1px solid #e4e4e4;
    border-bottom: 1px solid white;
}

.nav-link {
  display: block;
}

.tab-content {
  padding: 1em;
  width: 100%;
  border: 1px solid #e4e4e4
}

小提琴：https://jsfiddle.net/pqmefsbr/34/

我希望内容和活动标签之间没有任何边框。为此，我已将.nav-tabs .nav-item上的保证金从margin: 0 3px更改为margin: 0 3px -1 3px，并将border-bottom: 1px solid white添加到有效标签中。但是，这似乎没有完成任何事情。

在使用边框颜色和粗细来查看实际情况后，看起来content div的边框始终呈现在标签边框的顶部，所以我的白色border-bottom没有任何成就。我该怎么做才能让标签的边框呈现在顶部？是否有其他方法可以完成我想要做的事情？

Answer 1

Stacking without the z-index property | MDN

当未在任何元素，元素上指定z-index属性时   按以下顺序堆叠（从从下到上）：


根元素后代的背景和边框

HTML Descendant
中的非定位块，按外观顺序
按照HTML
中的外观顺序定位元素

简短回答是：

.nav-tabs {
  position: relative;
  ...
}

相关示例：

.a {
  height: 20px;
  background: pink;
  margin-bottom: -10px;
}

.b {
  height: 40px;
  border: 10px solid gray;
}

.relative {
  position: relative;
}

.z-index {
  z-index: 1;
}

<h3>Example 1: all default</h3>
<div class="a"></div>
<div class="b"></div>

<h3>Example 2: 1st position: relative</h3>
<div class="a relative"></div>
<div class="b"></div>

<h3>Example 3: both position: relative</h3>
<div class="a relative"></div>
<div class="b relative"></div>

<h3>Example 4: both position: relative + 1st z-index: 1</h3>
<div class="a relative z-index"></div>
<div class="b relative"></div>

CSS：如何控制边框的渲染顺序？

1 个答案: