如何在CSS中重疊元素？

我在小提琴中附上了這個步進器作為示例。

.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 中做到這一點？

它應該是這樣的。

uj5u.com熱心網友回復：

一種解決方案是針對.stepper-item.active .step-counter該類并首先洗掉填充。然后您可以將邊框顏色設定為白色而不是紅色，并使用 3px 而不是 1 來解決填充的洗掉問題。然后您可以添加outline: solid 1px red;以獲取紅色輪廓。

.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;
  outline: solid 1px red;
  border: 3px solid white;
  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>

uj5u.com熱心網友回復：

我們的主要目標是掩蓋實際元素與其邊框之間的空間。

該空間可以由一個嵌入的盒子陰影填充。它將隱藏它下面的所有內容；只需提供適量的spreadwith zero blur:)

只需將此代碼段添加到元素中：

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>

uj5u.com熱心網友回復：

我為您的問題找到了這個，希望對您有所幫助。

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

標籤：html css 弹性盒

上一篇：無法將兩個div水平居中

下一篇：如何在滾動容器內拉伸全高div？