CSS圈重叠部分

Question

我希望我的H2标题显示为此图片显示

此时这就是我的代码的样子

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

.green-bg { background: #488429; }

.title-border { border-radius: .25rem!important; }


.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }


.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>

<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>

我很困惑如何解决这个问题。有什么建议吗？

Answer 1

将按钮显示为块元素，根据需要调整边距。

margin: 0 auto -35px auto;
display: block;
position: relative;

.btn-circle.btn-xl {
      width: 70px;
      height: 70px;
      padding: 10px 16px;
      font-size: 24px;
      line-height: 1.33;
      border-radius: 35px;
    margin: 0 auto -35px auto;
    display: block;
    position: relative;
    }

    .green-bg { background: #488429; }

    .title-border { border-radius: .25rem!important; }


    .text-title-center { text-align: center!important; color: #fff; font-size: 41px; }


    .text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>

    <section class="green-bg title-border">
    <h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
    </section>

Answer 2

你去吧

.btn-circle.btn-xl {
  position:relative;
  top: 30px;
  left: 270px;
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

.green-bg { background: #488429; }

.title-border { border-radius: .25rem!important; }


.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }


.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>

<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>

我添加了

  position:relative;
  top: 30px;
  left: 270px;

编辑：这会把它放在一个固定的位置，把它放在你可以添加的页面的中心位置：

  position:relative;
  top: 30px;
  left: calc(100% - 50% - 35px);  //35px = half the width of the circle. 

Answer 3

我已为绿色背景div添加了position:relative，并且我已将其设置为position:absolute的按钮使用left:50%和transform:translateX(-50%)水平对齐并垂直移动我已将height button的一半top:-35px作为.btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; position:absolute; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); top:-35px; } .green-bg { background: #488429; margin:100px 0 0 0; position:relative; } .title-border { border-radius: .25rem!important; } .text-title-center { text-align: center!important; color: #fff; font-size: 41px; } .text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }，将其垂直对齐

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<section class="green-bg title-border">
  <button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
  <h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>

ddZERO