使按钮重叠div

Question

我正在尝试创建一个与div重叠的按钮。理想情况下，即使调整大小，我也希望按钮始终显示在div的底部，中心。我该怎么办？通常，当不需要重叠的div时，我可以创建重叠的div，但是当我需要一个重叠的div时，它们将不起作用！

我有以下标记：

.call_to_action{
  background-color: #000;
  height: 300px;
}
.button {
    background: #c43d3d;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    padding: 20px 25px;
    width:200px;
    text-align: center;
}
.overlap-header {
    position: relative;
}
.overlap-button {
    position: relative;
    display: block;
    margin: 100px auto 25px;
}

<section class="call_to_action">
  <div class="wrapper">
    <div class="content-block">
      <div class="content-block-wrapper">
        <div class="overlap-header">
          <span class="button overlap-button">Read more</span>
        </div>
      </div>
    </div>
  </div>
</section>

这是我要实现的目标的图像。

Answer 1

您可以添加一些负数union Eeprom { struct { uint8_t Byte1; uint8_t Byte2; uint8_t Byte3; uint8_t Byte4; }; float floatvalue; uint8_t Array[4]; }; union Eeprom Test; int main(void) { Test.floatvalue = 23.1; printf("floatvalue %3.2f \n Byte1 %x\n Byte2 %x\n Byte3 %x\n Byte4 %x\n Array[0] %x\n Array[1] %x\n Array[2] %x\n Array[3] %x\n", Test.floatvalue, Test.Byte1, Test.Byte2, Test.Byte3, Test.Byte4, Test.Array[0], Test.Array[1], Test.Array[2], Test.Array[3]); 。

margin

.call_to_action{
  background-color: #000;
  height: 300px;
}
.button {
    background: #c43d3d;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    padding: 20px 25px;
    width:200px;
    text-align: center;
    
    top: -30px; /* <-- This */
}
.overlap-header {
    position: relative;
}
.overlap-button {
    position: relative;
    display: block;
    margin: 100px auto 25px;
}

Answer 2

您可以尝试这样做。

使您的.call_to_action到display:flex;和position: relative; 然后添加justify-content: center;以使按钮水平居中。

然后将您的.wrapper设为position: absolute;，然后添加否定的bottom。

.call_to_action{
  background-color: #000;
  height: 300px;
  
  position: relative;
  display: flex;
  justify-content: center;
}

.wrapper{
  position: absolute;
  bottom: -25px;
}

.button {
    background: #c43d3d;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    padding: 20px 25px;
    width:200px;
    text-align: center;
}
.overlap-header {
    position: relative;
}
.overlap-button {
    position: relative;
    display: block;
}

<section class="call_to_action">
  <div class="wrapper">
    <div class="content-block">
      <div class="content-block-wrapper">
        <div class="overlap-header">
          <span class="button overlap-button">Read more</span>
        </div>
      </div>
    </div>
  </div>
</section>