如何在div卡片上添加Ribbon且避免布局位移？

问题根源 #

1. HTML结构不规范：<ul>的直接子元素只能是<li>，直接在<ul>下放置<div class="ribbon">不符合HTML标准，会干扰列表的正常布局逻辑。
2. 定位方式错误：.ribbon使用position: relative时，元素虽通过top偏移了位置，但仍会占据原文档流空间，导致下方第一个卡片被向下推挤。

解决方案 #

将Ribbon改为绝对定位（脱离文档流，不占用空间），同时修正HTML结构，把Ribbon放在目标卡片的父容器内，通过父容器的相对定位控制Ribbon的位置。

修正后的完整代码

CSS部分

.cards_item {
  position: relative; /* 给父容器设置相对定位，作为ribbon的定位参考 */
  list-style: none; /* 移除默认列表样式 */
  margin-bottom: 20px; /* 可选：给卡片添加间距 */
}

.ribbon {
  background-color: #a00;
  position: absolute; /* 改为绝对定位，脱离文档流 */
  left: -15px; /* 调整位置让ribbon超出卡片左侧 */
  top: -10px; /* 调整位置让ribbon贴在卡片顶部上方 */
  height: fit-content;
  transform: rotate(-45deg);
  z-index: 10; /* 确保ribbon在卡片上方显示 */
}

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

/* 可选：给卡片添加基础样式，让布局更清晰 */
.card {
  border: 1px solid #eee;
  padding: 10px;
  background: #fff;
}

HTML部分

<div class="main">
  <ul class="cards">
    <li class="cards_item">
      <!-- 将ribbon放到目标卡片的父li中 -->
      <div class="ribbon">
        <p>Best value pack</p>
      </div>
      <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>

关键修改说明 #

• 给.cards_item添加position: relative，让内部的绝对定位元素.ribbon以它为基准定位。
• 将.ribbon的position改为absolute，使其不再占据文档流空间，不会推挤下方元素。
• 调整.ribbon的left和top值，让它的位置更贴合卡片左上角（可根据需求微调）。
• 修正HTML结构，把.ribbon放到对应的<li>内部，符合<ul>的规范。

内容的提问来源于stack exchange，提问作者Syed Faraz Hasan