html - fieldset 的底部边框覆盖内容

Question

我想实现某种效果，其中字段集的底部边框应该覆盖其中的内容，z-index 低于内容，因此它看起来像这样:

到目前为止我得到的是简单的东西，其中每个圆圈都包含在字段集中，但没有任何效果。

HTML 和 CSS 代码如下。任何关于如何实现它的线索都是惠康的，我研究过但没有找到任何帮助的 fieldset 标签的文档。

fieldset {
  margin-left: 80px;
  margin-right: 80px;
  padding-bottom: 50px;
  padding-bottom: 20px;
  border: 5px dotted rgb(88, 85, 86);
}

label {
  float: left;
  width: 25%;
  margin-right: 0.5em;
  padding-top: 0.2em;
  text-align: right;
  font-weight: bold;
}

legend {
  padding: 0.2em 0.5em;
  max-width: 475px;
  color: rgb(88, 85, 86);
  text-align: center;
  font-family: 'gotham-book';
  font-size: 32px;
}

<form>
  <fieldset>
    <legend>Veja como é fácil participar</legend>

    <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12" style="margin-left: 9%">
      <div class="circles circle-yellow">
        <img class="img-responsive" src="\galeria\repositorio\images\landing\mensalidades-iguais\money.png">
        <p class="yellow-texto">
          Mensalidades que cabem no seu bolso
        </p>
      </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
      <div class="circles circle-yellow">
        <h1 class="yellow-parcelas">12x</h1>
        <p class="yellow-texto">
          parcelas iguais
        </p>
      </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
      <div class="circles circle-red">
        <span class="red-span">R$</span>
        <h1 class="red-parcelas">162</h1>
        <p class="red-texto">
          mensais
        </p>
        <small class="red-small">R$ 1.944,00 ANUAL</small>
      </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
      <div class="circles circle-light-blue">
        <span class="light-blue-span">R$</span>
        <h1 class="light-blue-parcelas">37</h1>
        <p class="light-blue-texto">
          mensais
        </p>
        <p class="light-blue-texto">
          material
        </p>
        <p class="light-blue-texto">
          didático
        </p>
        <small class="light-blue-small">R$ 444,00 ANUAL</small>
      </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
      <div class="circles circle-dark-blue">
        <div class="dark-blue-texto">total</div>
        <span class="dark-blue-span">R$</span>
        <h1 class="dark-blue-parcelas">162</h1>
        <p class="dark-blue-texto">
          mensais
        </p>
        <small class="dark-blue-small">R$ 1.944,00 ANUAL</small>
      </div>
    </div>

  </fieldset>
</form>

Answer 1

诀窍是使用绝对定位来利用 z-index，如我的 JS Fiddle 所示。 .我不会让您厌烦细节，您可以在这里阅读更多相关信息 > Link .我将在下面留下我的代码，如有任何其他问题，请随时提出。

* {
  margin: 0;
  padding: 0;
}

.wrap {
  position: relative;
  width: 90%;
  margin: 0 auto;
  margin-top: 1em;
  background: #ccc;
  height: 200px;
  border: 2px dotted #f0f;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  width: 80%;
  height: 200px;
  background: #f0f;
  margin-top: 100px;
}

<div class="wrap">
  <div class="inner">
   <!-- Your Icons here. -->
  </div>
</div>

NOTE:

If this answer met your needs don't forget to mark it as correct for other users to find when surfing the web. Thanks.

问候，-B