为定价设置角带粘性 table

Question

基本上，我有带角带的价格table。在价格 table 上，我在悬停时向上滑动过渡。当我将鼠标悬停在价格 table 上时，角色带会移位。看看我的代码。我想通过滑动过渡使角带在悬停时变粘。

CSS

.zoom:hover {
  transition: transform .5s ease;
  -webkit-transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 300ms;
  transform: translate3d(0, -1%, 0);
}

/* RIBBON CSS */
.container__wrapper {
  left: 0px;
  position: absolute;
  top: 15px;
  height: 141px;
  width: 170px;
  overflow: hidden;
}

.container__ribbon {
  z-index: 100;
 left: -60px;
 position: absolute;
 top: 40px;
 height: 30px;
 width: 230px;
 transform: rotate(-45deg);
 background-color: #FF0000;
 display: flex;
 align-content: center;
 justify-content: center;
 box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.container__ribbon h6 {
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  align-self: center !important;
  font-weight: 400;
  padding-top: 0.3em;
}

/*___________________________________________________________ */
/* css for package */

/* SCROLLBARR CSS */
.card {
  border: 0 !important;
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #DAD8D9;
  border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
  background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
  background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}

.bordered-cyan::-webkit-scrollbar-thumb {
  box-shadow: none;
}

.square::-webkit-scrollbar-track {
  border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
  width: 6px;
}

.example-1 {
  position: relative;
  overflow-y: scroll;
  height: 175px;
}

/* CAROUSEL */

.brderline {
  margin-top: 1rem;
  padding: .5rem;
  border: 1px solid #11A085;

}

/* PACKAGES TITLE */

.packagetitle h4 {
  color: #323232 !important;
  font-size: 15px;
  font-weight: 700;
}

.packagetitle h1 {
  color: #323232 !important;
  font-size: 35px;
  font-weight: 800;
}

.pkpara {
  font-family: 'Circular Std Book';
  font-size: 25px;
  color: #323232 !important;
  font-weight: 100;
  font-size: 20px;
}

/* PACKAGE BOX CSS */

/* .pk1 {
  border: 1px solid #11A085;
} */

.tagimg {
  position: absolute;
  top: 2%;
  left: 0;
  width: 120px !important;
  height: 120px;
}

.tagimg-r {
  position: absolute;
  top: 2%;
  right: 0;
  width: 120px !important;
  height: 120px;
}

.pkg1 h5 {
  font-size: 15px;
  color: #11A085;
}

.pkg1 h2 {
  font-size: 25px;
  color: #323232;
  font-weight: 700;
}

.pkg1 p {
  font-size: 16px;
  color: #8d8d8d;
  text-decoration: line-through;
}

.pkg1 h1 {
  color: #11A085;
  font-size: 45px;
  font-weight: 700;
  margin-bottom: 1rem;
}

ul.pkg-items>li {
  color: #323232;
  list-style: none;
  font-family: Circular Std Medium;
  font-style: normal;
}

ul.pkg-items li::before {
  content: "22";
  color: #8d8d8d;
  font-weight: bold;
  display: inline-block;
  width: 1.5rem;
}

.pkgbtn {
  text-align: center;
  margin: 2rem 0;
}

.innerpkgbtn {
  padding: 20px 60px !important;
}

.pkg1 h6 {
  font-size: 14px;
  color: #8d8d8d;
}

.viewmre h4 {
  padding: 1rem 0 !important;
  font-size: 14px;
  text-align: center;
}

.callnchat {
  font-size: 16px;
  text-align: center;
  margin-bottom: 2rem;
}

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

  <!-- Owl Carousel -->

  <link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
  <link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">

  <script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
  <script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>
  
  
  
   <div class="item brderline zoom">
        <div class="pt-2 pb-2 pkg1">
          <div class="pk1">

            <div class="container__wrapper">
              <div class="container__ribbon">
                <h6>Free Delivery Rush</h6>
              </div>
            </div>

            <!-- <img src="assets/img/badgeleft.png" class="tagimg">s -->
            <h5 class="text-center">LOGO PACKAGE</h5>
            <h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
            <p class="text-center">9</p>
            <h1 class="text-center">.00</h1>

            <div class="card example-1 square scrollbar-dusty-grass square thin">
              <ul class="pkg-items">
                <li>3 Custom Logo Design Concepts</li>
                <li>1 Dedicated Designer</li>
                <li>4 Revisions</li>
                <li>2 hours TAT</li>
                <li>Unique Design Guarantee</li>
                <li>100% Unique Design Guarantee</li>
                <li>100% Satisfaction Guarantee</li>
                <li>100% Money Back Guarantee *</li>
                <li>100% Ownership Rights</li>
              </ul>
            </div>

            <div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
            <h6 class="text-center"> Additional For Expedited Services </h6>
            <div class="viewmre">
              <h4><a href="#" style="color: #323232; text-decoration: none;"> VIEW DETAILS</a></h4>
            </div>
            <div class="callnchat">
              <a href="tel:123456789" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-phone-square-alt"></i>1·866·268·1794</a>
              &nbsp; <a href="#" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-comment-dots"></i>LIVE CHAT</a>
            </div>

          </div>
        </div>
      </div>
  
  
  
  
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>

**

Answer 1

绝对

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. -MDN

由于 .container__wrapper 是绝对定位的，因此使其相对于同样定位并在悬停时移动的父项，例如 .item class。请参阅下面的代码段：

.zoom:hover {
  transition: transform .5s ease;
  -webkit-transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 300ms;
  transform: translate3d(0, -1%, 0);
}


/* RIBBON CSS */

.container__wrapper {
  left: 0px;
  position: absolute;
  top: 0px;
  height: 141px;
  width: 170px;
  overflow: hidden;
}

.item {
  position: relative;
}

.container__ribbon {
  z-index: 100;
  left: -60px;
  position: absolute;
  top: 40px;
  height: 30px;
  width: 230px;
  transform: rotate(-45deg);
  background-color: #FF0000;
  display: flex;
  align-content: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.container__ribbon h6 {
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  align-self: center !important;
  font-weight: 400;
  padding-top: 0.3em;
}


/*___________________________________________________________ */


/* css for package */


/* SCROLLBARR CSS */

.card {
  border: 0 !important;
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #DAD8D9;
  border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
  background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
  background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}

.bordered-cyan::-webkit-scrollbar-thumb {
  box-shadow: none;
}

.square::-webkit-scrollbar-track {
  border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
  width: 6px;
}

.example-1 {
  position: relative;
  overflow-y: scroll;
  height: 175px;
}


/* CAROUSEL */

.brderline {
  margin-top: 1rem;
  padding: .5rem;
  border: 1px solid #11A085;
}


/* PACKAGES TITLE */

.packagetitle h4 {
  color: #323232 !important;
  font-size: 15px;
  font-weight: 700;
}

.packagetitle h1 {
  color: #323232 !important;
  font-size: 35px;
  font-weight: 800;
}

.pkpara {
  font-family: 'Circular Std Book';
  font-size: 25px;
  color: #323232 !important;
  font-weight: 100;
  font-size: 20px;
}


/* PACKAGE BOX CSS */


/* .pk1 {
  border: 1px solid #11A085;
} */

.tagimg {
  position: absolute;
  top: 2%;
  left: 0;
  width: 120px !important;
  height: 120px;
}

.tagimg-r {
  position: absolute;
  top: 2%;
  right: 0;
  width: 120px !important;
  height: 120px;
}

.pkg1 h5 {
  font-size: 15px;
  color: #11A085;
}

.pkg1 h2 {
  font-size: 25px;
  color: #323232;
  font-weight: 700;
}

.pkg1 p {
  font-size: 16px;
  color: #8d8d8d;
  text-decoration: line-through;
}

.pkg1 h1 {
  color: #11A085;
  font-size: 45px;
  font-weight: 700;
  margin-bottom: 1rem;
}

ul.pkg-items>li {
  color: #323232;
  list-style: none;
  font-family: Circular Std Medium;
  font-style: normal;
}

ul.pkg-items li::before {
  content: "22";
  color: #8d8d8d;
  font-weight: bold;
  display: inline-block;
  width: 1.5rem;
}

.pkgbtn {
  text-align: center;
  margin: 2rem 0;
}

.innerpkgbtn {
  padding: 20px 60px !important;
}

.pkg1 h6 {
  font-size: 14px;
  color: #8d8d8d;
}

.viewmre h4 {
  padding: 1rem 0 !important;
  font-size: 14px;
  text-align: center;
}

.callnchat {
  font-size: 16px;
  text-align: center;
  margin-bottom: 2rem;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<!-- Owl Carousel -->

<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">

<script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>



<div class="item brderline zoom">

  <div class="pt-2 pb-2 pkg1">
    <div class="pk1">
      <div class="container__wrapper">
        <div class="container__ribbon">
          <h6>Free Delivery Rush</h6>
        </div>
      </div>


      <!-- <img src="assets/img/badgeleft.png" class="tagimg">s -->
      <h5 class="text-center">LOGO PACKAGE</h5>
      <h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
      <p class="text-center">9</p>
      <h1 class="text-center">.00</h1>

      <div class="card example-1 square scrollbar-dusty-grass square thin">
        <ul class="pkg-items">
          <li>3 Custom Logo Design Concepts</li>
          <li>1 Dedicated Designer</li>
          <li>4 Revisions</li>
          <li>2 hours TAT</li>
          <li>Unique Design Guarantee</li>
          <li>100% Unique Design Guarantee</li>
          <li>100% Satisfaction Guarantee</li>
          <li>100% Money Back Guarantee *</li>
          <li>100% Ownership Rights</li>
        </ul>
      </div>

      <div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
      <h6 class="text-center"> Additional For Expedited Services </h6>
      <div class="viewmre">
        <h4><a href="#" style="color: #323232; text-decoration: none;"> VIEW DETAILS</a></h4>
      </div>
      <div class="callnchat">
        <a href="tel:123456789" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-phone-square-alt"></i>1·866·268·1794</a> &nbsp;
        <a href="#" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-comment-dots"></i>LIVE CHAT</a>
      </div>

    </div>
  </div>
</div>





<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>

更多关于 position 的 here。

为定价设置角带粘性 table

Make corner ribbon sticky for pricing table

html

css

bootstrap-4

绝对