php - 我们如何在下拉部分放置 Angular 带？

Question

在我的网站练习中，我需要在下拉部分放置一个 Angular 色带。 我有一个按钮，里面有一个下拉部分，我想放一条丝带进行促销。 但是我的丝带仍然在我的 div 下方，而不是在我的右下角 我的 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>

我的 CSS 代码是:

 .corner-ribbon-buy-button {
      -webkit-transition: 200s linear;
      transition: 200ms linear;
      position: relative;
      // left: 0px;
      top: 0;
      z-index: 1;
      overflow: hidden;
      width: 91px;
      height: 91px;
      text-align: right;
      line-height: 50px;

    }
    .corner-ribbon-buy-button span {
      font-size: 12px;
      color: #fff;
      text-transform: uppercase;
      text-align: center;
      line-height: 30px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      display: block;
      background: #0070c9;
      position: relative;
      top: 25px;
      z-index: 1;

    }

请问如何将功能区放在下拉 div 的右下角？

Answer 1

这是一个简单的例子

#main {
  position:relative;
  height: 100px;
  width: 50px;
  background-color: #999;
}

.ribbon{
    height: 24px;
    width: 24px;
    background-color: red;
    bottom: 0;
    right: 0;
    position: absolute;
}

<div id="main" >
  <div class="ribbon"></div>
</div>