如何将促销角形丝带定位到下拉菜单区域的右下角？

看起来你的丝带定位问题主要出在元素的定位方式和父容器的定位上下文上。咱们一步步调整：

1. 给父容器设置定位参考 #

丝带需要相对于下拉项（.dropdown-item）定位，所以首先得给这个a标签加上相对定位，让内部的绝对定位元素有明确的参考基准：

.dropdown-item {
  position: relative;
  display: block; /* 确保它是块级元素，能容纳绝对定位的丝带 */
  /* 可以根据你的菜单样式添加padding，避免丝带完全覆盖内容 */
  padding: 0.5rem 1rem;
}

2. 修改丝带容器的定位方式 #

把.corner-ribbon-buy-button的position: relative改成position: absolute，再设置它固定在右下角：

.corner-ribbon-buy-button {
  transition: 200ms linear; /* 去掉webkit前缀，现代浏览器已支持标准写法 */
  position: absolute; /* 关键：脱离文档流，相对于父容器定位 */
  right: 0; /* 贴紧下拉项右侧 */
  bottom: 0; /* 贴紧下拉项底部 */
  z-index: 1;
  overflow: hidden;
  width: 91px;
  height: 91px;
  /* 移除原来的top:0，不需要了 */
}

3. 调整丝带文字的位置 #

因为容器固定在了右下角，需要微调span的位置，让旋转后的文字正好形成右下角的角形丝带：

.corner-ribbon-buy-button span {
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 30px;
  transform: rotate(-45deg);
  display: block;
  background: #0070c9;
  position: relative;
  top: 55px; /* 往下调整，适配右下角位置 */
  left: 15px; /* 横向偏移，让文字对齐丝带角 */
  width: 100%; /* 确保文字块宽度足够 */
}

完整修改后的代码示例 #

HTML（无需修改，保留你原有的结构） #

<div>
  <a class="dropdown-item" href="<?php echo $href_brown ?>">
    <?php if (($current_language !== "/de") && ($promotion)){ echo "<div class=\"corner-ribbon-buy-button\"><span>$20 off</span></div>"; } ?>
    first product <br>
    <?php if (($current_language !== "/de") && ($promotion)){ echo "<span style=\"font-style: italic;\"> Starting at <span style=\"text-decoration:line-through;\">$149</span> $129 </span>"; } ?>
  </a>
</div>

CSS #

/* 新增父容器定位样式 */
.dropdown-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
}

.corner-ribbon-buy-button {
  transition: 200ms linear;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  width: 91px;
  height: 91px;
}

.corner-ribbon-buy-button span {
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 30px;
  transform: rotate(-45deg);
  display: block;
  background: #0070c9;
  position: relative;
  top: 55px;
  left: 15px;
  width: 100%;
}

调整思路说明 #

• 原来的position: relative会让丝带留在文档流中，导致它出现在产品文字下方；改成absolute后，丝带会脱离文档流，完全基于父容器定位。
• 给.dropdown-item加position: relative是核心：如果父容器没有定位属性，绝对定位的丝带会相对于页面或者更上层的定位元素偏移，而不是绑定在下拉项上。
• 微调span的top和left是因为旋转后文字的位置会偏移，需要适配右下角的容器位置，确保丝带的角正好卡在下拉项的右下角。

如果你的下拉项有特殊的尺寸或内边距，可以再微调丝带容器的width/height或者span的偏移值，这个方案应该能解决你的核心定位问题。

内容的提问来源于stack exchange，提问作者shtb2708