html - 如何使用 css 将 div 边框隐藏在另一个 div 后面？

Question

我希望边框 div “隐藏”在圆圈后面而不是穿过它。我认为 z-index 是做这样的事情的方法。

有什么想法吗？

JSFIDDLE:http://jsfiddle.net/qs5xmege/1/

CSS 和 HTML

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  width:22px;
  height:22px;
  border-radius:11px;
  border: 3px solid red;
  background-color: #FFF;
  margin: 30px auto 0 auto;
  z-index: 100;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}

<div class="container">
  <div class="border"></div>
  <div class="circle"></div>
</div>

Answer 1

给.circle一个position:relative，z-index仅适用于position:relative，position:absolute或位置:固定

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  width:22px;
  height:22px;
  border-radius:11px;
  border: 3px solid red;
  background-color: #FFF;
  margin: 30px auto 0 auto;
  position: relative;
  z-index: 100;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}

<div class="container">
    <div class="border"></div>
    <div class="circle"></div>
</div>