skip to Main Content

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>

2

Answers


  1. 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;
      }
    }
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search