How to place a ribbon over text in a div

Question

I am trying to add ribbon over div of cards in my html page, but it is displacing the div below it. Could anyone help me on how to solve it?

The ribbon is displacing the first card and pushing it down.

.ribbon {
  background-color: #a00;
  position: relative;
  left: -0px;
  top: 40px;
  height: fit-content;
  transform: rotate(-45deg);
}

.ribbon p {
  color: #fff;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px;
  padding: 1px 10px;
  text-align: center;
  text-decoration: none;
}

<div class="main">
  <ul class="cards">
    <div class="ribbon">
      <p>Best value pack</p>
    </div>

    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Live sessions</p>
        </div>
      </div>
    </li>

    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Job Assistance</p>

        </div>
      </div>
    </li>
  </ul>
</div>

score -1 · Answer 1 · answered Mar 16 '23 at 13:55

-1

try adding z-index on ribbon, like this:

  z-index: 5;
  background-color: #a00;
  position: relative;
  left: -0px;
  top: 40px;
  height: fit-content;
  
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
         
}

answered Mar 16 '23 at 13:55

goga goglika

64
4

It is still pushing the card down – Syed Faraz Hasan Mar 16 '23 at 14:02

isherwood · Accepted Answer · 2023-03-16T14:29:38.820

Your list markup is invalid. A div is not a valid child of a list element. Fortunately we don't want it in the list anyway. We'll position it absolutely inside a shared container (which needs relative positioning to contain the ribbon). We can center it with the usual 50% tricks.

Also, you don't need vendor prefixes for transform. See https://caniuse.com/transforms2d.

.main {
  position: relative;
}

.ribbon {
  position: absolute;
  background-color: #a00;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.ribbon p {
  color: #fff;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px;
  padding: 1px 10px;
  text-align: center;
  text-decoration: none;
}

<div class="main">
  <div class="ribbon">
    <p>Best value pack</p>
  </div>

  <ul class="cards">
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Live sessions</p>
        </div>
      </div>
    </li>

    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Job Assistance</p>
        </div>
      </div>
    </li>
  </ul>
</div>

How to place a ribbon over text in a div

2 Answers2