CODEWITHSUNDEEP
htmlcss
Freddy
Freddy

Reputation: 867

Make button overlap div

I'm trying to create a button which overlaps a div. Ideally, I want the button to always appear at the bottom, center of the div even when resized. How can I go about this? Normally I can create overlapping div's when they're not needed, but when I need one, they don't work!

I have the following markup:

.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>

enter image description here

Here's an image of what I'm trying to achieve.

Upvotes: 0

Views: 2039

Answers (2)

davecar21
davecar21

Reputation: 2674

You can try doing this.

Make your .call_to_action to display:flex; and position: relative; Then add justify-content: center; to make the button horizontally centered.

Then make your .wrapper to position: absolute; then add negative 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>

Upvotes: 1

Marc Hjorth
Marc Hjorth

Reputation: 1950

You could add some negative top 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;
}
<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>

Upvotes: 1

Related Questions