如何重叠 CSS 中的元素？

Question

我在 fiddle 中附加了这个步进器作为示例。

.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 12px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.active .step-counter {
  background-color: red;
  border: 1px solid red;
  width: 15px;
  height: 15px;
  background-clip: content-box;
  padding: 3px;
  top: -2px;
  margin-bottom: 8px;
  z-index: 3;
}

.stepper-item.completed .step-counter {
  background-color: red;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid red;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}

.stepper-item:last-child::after {
  content: none;
}

<div class="stepper-wrapper">
  <div class="stepper-item completed">
    <div class="step-counter"></div>
    <div class="step-name">First</div>
  </div>
  <div class="stepper-item completed">
    <div class="step-counter"></div>
    <div class="step-name">Second</div>
  </div>
  <div class="stepper-item active">
    <div class="step-counter"></div>
    <div class="step-name">Third</div>
  </div>
  <div class="stepper-item">
    <div class="step-counter"></div>
    <div class="step-name">Forth</div>
  </div>
</div>

但我不知道如何重叠这个活动元素，使这些左右线条一直延伸到第一个（外）圆。

这部分...

如何在 CSS 中制作这个？

应该是这样的

Answer 1

我找到了这个来解决你的问题，希望对你有帮助。

.stepper-item.active .step-counter::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid white;
}

Answer 2

我们的主要目标是 cover-up 实际元素与其边框之间的 space。

space可以用插入box-shadow来填充。它将隐藏其下的所有内容；用 zero blur 给出适量的 spread :)

只需将此代码段添加到元素中：

box-shadow: 0 0 0 3px white inset;

这是编辑后的片段

.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 12px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.active .step-counter {
  background-color: red;
  border: 1px solid red;
  width: 15px;
  height: 15px;
  background-clip: content-box;
  /* Here it is */
  box-shadow: 0 0 0 3px white inset;
  padding: 3px;
  top: -2px;
  margin-bottom: 8px;
  z-index: 3;
}

.stepper-item.completed .step-counter {
  background-color: red;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid red;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}

.stepper-item:last-child::after {
  content: none;
}

<div class="stepper-wrapper">
      <div class="stepper-item completed">
        <div class="step-counter"></div>
        <div class="step-name">First</div>
      </div>
      <div class="stepper-item completed">
        <div class="step-counter"></div>
        <div class="step-name">Second</div>
      </div>
      <div class="stepper-item active">
        <div class="step-counter"></div>
        <div class="step-name">Third</div>
      </div>
      <div class="stepper-item">
        <div class="step-counter"></div>
        <div class="step-name">Forth</div>
      </div>
    </div>

如何重叠 CSS 中的元素？

How to overlap elements in CSS?

html

css

flexbox