Button with absolute positioning not behaving like other absolutely positioned elements on page - Html

cts
April 13, 2023
227 views
1 vote
2 Answers

I have a fairly simple "promo banner" container, which is basically just an image with some overlayed text and and a button. I’m using https://www.w3schools.com/howto/howto_css_image_text.asp as a reference with the outer container (.promo-banner) positioned relative, with all child elements positioned absolute.

This has worked fine until I introduced my button, which has pre-set styles from another component (position: relative) but I added a button-container with absolute positioning to offset that, regardless I cannot achieve the button displaying how I expect (below the p) without using hacky top/bottom properties with lots of px offset.

.promo-banner {
  position: relative;
  img {
    position: absolute;
    width: 1440px;
    height: 671px;
  }
  .banner-content {
    position: absolute;
    padding-top: 222px;
    padding-left: 56px;
  }
  h2 {
    font-size: 44px;
    margin-bottom: 24px;
    color: white;
    font-style: italic;
    span {
      font-size: 44px;
      padding-top: 8px;
      font-style: normal;
    }
  }
  p {
    position: absolute;
    font-size: 16px;
    color: white;
    margin-bottom: 24px;
  }
  .button-container {
    position: absolute;
  }
  .link-btn {
    position: relative;
    color: green;
    background-color: transparent;
    font-size: 16px;
    border: 0;
    padding: 0;
  }
  .link-btn span {
    font-size: 16px;
    padding-right: 12px;
    padding-bottom: 4px;
  }
  .link-btn span::after {
    position: absolute;
    content: '';
    border-bottom: 2px solid green;
    width: 80%;
    bottom: 0;
    left: 0;
  }
}

<div class="promo-banner">
  <img src="../../assets/images/promo-banner.png" alt="Promo banner" />
  <div class="banner-content">
    <h2>
      My content<span>that displays on an image</span>
    </h2>
    <p>
      A magnificent piece of copy with a button below..
    </p>
    <div class="button-container">
      <button type="button">
        <span>Button link</span>
      </button>
    </div>
  </div>
</div>

Answers

When you use position: absolute; for .banner-content as a container you don’t need to apply position: absolute; to it’s children, which is cause the problem here, I comment out the unnecessary code here:

.promo-banner {
  position: relative;
  img {
    position: absolute;
    width: 1440px;
    height: 671px;
  }
  .banner-content {
    position: absolute;
    padding-top: 222px;
    padding-left: 56px;
  }
  h2 {
    font-size: 44px;
    margin-bottom: 24px;
    color: white;
    font-style: italic;
    span {
      font-size: 44px;
      padding-top: 8px;
      font-style: normal;
    }
  }
  p {
    // position: absolute;
    font-size: 16px;
    color: white;
    margin-bottom: 24px;
  }
  // .button-container {
  //   position: absolute;
  // } You Remove the button's container too.
  .link-btn {
    position: relative;
    color: green;
    background-color: transparent;
    font-size: 16px;
    border: 0;
    padding: 0;
  }
  .link-btn span {
    font-size: 16px;
    padding-right: 12px;
    padding-bottom: 4px;
  }
  .link-btn span::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid green;
    width: 80%;
    bottom: 0;
    left: 0;
  }
}

To overlay your text on your image you only need to use position: absolute on your image. The others can be positioned statically within your .promo-banner div. Just remove the position:absolute; from them and the button will appear below the p element

Marked up code below:

.promo-banner {
  position: relative;
}

.promo-banner img {
  position: absolute;
  width: 1440px;
  height: 671px;
}

.promo-banner .banner-content {
  position: absolute;
  padding-top: 222px;
  padding-left: 56px;
}

.promo-banner h2 {
  font-size: 44px;
  margin-bottom: 24px;
  color: white;
  font-style: italic;
}

.promo-banner h2 span {
  font-size: 44px;
  padding-top: 8px;
  font-style: normal;
}

.promo-banner p {
  /*positon: absolute deleted this */
  font-size: 16px;
  color: white;
  margin-bottom: 24px;
}

.promo-banner .button-container {
  /*positon: absolute deleted this */
}

.promo-banner .link-btn {
  position: relative;
  color: green;
  background-color: transparent;
  font-size: 16px;
  border: 0;
  padding: 0;
}

.promo-banner .link-btn span {
  font-size: 16px;
  padding-right: 12px;
  padding-bottom: 4px;
}

.promo-banner .link-btn span::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid green;
  width: 80%;
  bottom: 0;
  left: 0;
}

<div class="promo-banner">
  <img src="https://placekitten.com/1440/671" alt="Promo banner" />
  <div class="banner-content">
    <h2>
      My content<span> that displays on an image</span>
    </h2>
    <p>
      A magnificent piece of copy with a button below..
    </p>
    <div class="button-container">
      <button type="button">
        <span>Button link</span>
      </button>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Button with absolute positioning not behaving like other absolutely positioned elements on page – Html

Answers