时间戳

首页 > 解决方案 > 用另一个相同大小的 div 完全覆盖一个 div

html - 用另一个相同大小的 div 完全覆盖一个 div

问题描述

问题：

当它们被覆盖时，我不应该看到任何其他底层 div（与覆盖它们的 div 大小相同）。

.gauge-wrapper {
    position:relative;
    margin:20px;
    background-color: black;
}
.gauge-arc {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    border-radius:100%;
    border:7px solid;
}
.gauge-arc1 {
    border-color:red transparent transparent transparent;
    transform: rotate(200deg);
}
.gauge-arc2 {
  border-color:red transparent transparent transparent;
  transform: rotate(180deg);
}
.gauge-arc3 {
    border-color:red transparent transparent transparent;
    transform: rotate(180deg);
}
.gauge-mask {
    border-color: transparent transparent white transparent;
    z-index:9999
}
.gauge-background {
  border-color: #c3bdbd;
  z-index: -1;
}
<div class="gauge-wrapper">
    <div class="gauge-arc gauge-arc1"></div>
    <div class="gauge-arc gauge-arc2"></div>
    <div class="gauge-arc gauge-arc3"></div>
    <div class="gauge-arc gauge-mask"></div>
    <div class="gauge-arc gauge-background"></div>
</div>

我试过的：

它应该是什么样子：

顶部 div 周围不应有轮廓。我愿意接受几乎无法解决问题的奇怪解决方案。如果你能为我找到一种更简单的方法来做我正在做的事情，那很好，但我仍然想知道如何用 HTML/CSS 解决这个特定问题。

标签： htmlcssborderz-index

解决方案

如果你使用盒子大小，你可以让蒙版变大 2px，然后给它一个 2px 厚的边框，这应该覆盖你下面的弧：

* {
  box-sizing: border-box;  /* makes squares same size no matter padding and border */
}

.gauge-wrapper {
  width: 102px;      /* give this width and height (optional) otherwise it will take no space as everything inside is positioned absolutely */
  height: 102px;
  position: relative;
  margin: 20px;
}

.gauge-arc {
  position: absolute;   
  top: 1px;           /* start these 1px inside so outer circle is "larger" and will cover */
  left: 1px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 7px solid;
}

.gauge-arc1 {
  border-color: red transparent transparent transparent;
  transform: rotate(200deg);
}

.gauge-arc2 {
  border-color: red transparent transparent transparent;
  transform: rotate(180deg);
}

.gauge-arc3 {
  border-color: red transparent transparent transparent;
  transform: rotate(180deg);
}

.gauge-mask {
  top: 0;
  left: 0;
  width: 102px;
  height: 102px;
  border: 9px solid;
  border-color: transparent transparent white transparent;
  z-index: 9999
}

.gauge-background {
  border-color: #c3bdbd;
  z-index: -1;
}
<div class="gauge-wrapper">
  <div class="gauge-arc gauge-arc1"></div>
  <div class="gauge-arc gauge-arc2"></div>
  <div class="gauge-arc gauge-arc3"></div>
  <div class="gauge-arc gauge-mask"></div>
  <div class="gauge-arc gauge-background"></div>
</div>

推荐阅读