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所示。我不会厌倦你在这里可以阅读更多关于它的细节＆gt; Link。我会在下面留下我的代码，任何进一步的问题都可以随意提问。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

注意：

如果此答案符合您的要求，请不要忘记将其标记为正确，以便其他用户在网上浏览时找到。感谢。

此致 -B

底部边框覆盖了fieldset的内容

1 个答案: