Question

我有一个定价表部分，其中有一个额外的价格类别的横幅。但我无法在该特定位置修复此位置（它可以是任何意味着响应的设备）。我附上了我迄今为止尝试过的内容。我想要这样的事情：
点击 FIDDLE.

＆＃13;

/* CSS used here will be applied after bootstrap.css */

color: #000000;
text-transform: uppercase;

}
.pricing-header p {
  color: #000000;
}
.pricing-item {
  text-align: center;
  border: 1px solid #DDDDDD;
  box-shadow: 6px 10px 26px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 6px 10px 26px rgba(0, 0, 0, .4);
  -moz-box-shadow: 6px 10px 26px rgba(0, 0, 0, .4);
  background-color: #FFFFFF;
  margin-bottom: 25px;
  width: 265px;
  float: left;
  margin-left: 20px;
}
.pricing-item h2 {
  text-align: center;
  padding: 12px 0px;
  background-color: #171717;
  margin: 0px;
  color: #FFFFFF;
}
.pricing-item h3 {
  border-bottom: 1px solid #DDD;
  text-align: center;
  padding: 40px;
  margin: 0px;
  color: #FFFFFF;
}
.pricing-item span {
  font-size: 16px;
}
.pricing-item p {
  border-bottom: 1px solid #DDD;
  padding: 9px 0px;
  margin: 0px;
}
.odd-item-list {
  background-color: #F4F4F4;
}
.pricing-item button {
  width: 100%;
  margin: 0px;
  padding: 6px;
  border: 1px solid #ddd;
  color: #FFFFFF;
}
.sale-box {
  position: absolute;
  top: 0;
  overflow: hidden;
  height: 130px;
  width: 112px;
  text-align: center;
  z-index: 0;
  right: 15px;
}
.sale-box span.on_sale {
  font-size: 14px;
  color: #444;
  background: #ffd400;
  text-transform: uppercase;
  padding: 25px 0px 8px 45px;
  width: 215px;
  text-align: center;
  display: block;
  position: absolute;
  left: -27px;
  top: -28px;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: rotate(-44deg);
  -ms-transform: rotate(-44deg);
  transform: rotate(40deg);
  box-shadow: 3px -4px 13px 3px rgba(0, 0, 0, 0.75);
}

＆＃13;

<section>
  <div id="pricing">
    <div class="container">
      <div class="row">

        <div class="col-md-12">
          <div class="pricing-header">
            <h2 class="wow fadeInUp">Pricing Table</h2>
            <hr>
            <p class="wow fadeInUp">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>

          <div class="pricing-item">
            <h2>Basic</h2>
            <h3>$19/<span>mo</span></h3>
            <p class="odd-item-list">1 Website</p>
            <p>1 GB Storage</p>
            <p class="odd-item-list">10 GB Bandwith</p>
            <p>3 Month Support</p>
            <p class="odd-item-list">Unlimited Subdomains</p>
            <p>5 Database</p>
            <button class="wow slideInUp" data-wow-duration=".3s" data-wow-delay=".3s">Buy Now</button>
          </div>


          <div class="pricing-item">
            <h2>Standard</h2>
            <h3>$59/<span>mo</span></h3>
            <p class="odd-item-list">5 Website</p>
            <p>5 GB Storage</p>
            <p class="odd-item-list">60 GB Bandwith</p>
            <p>6 Month Support</p>
            <p class="odd-item-list">Unlimited Subdomains</p>
            <p>10 Database</p>
            <button class="wow slideInDown" data-wow-duration=".5s" data-wow-delay=".5s">Buy Now</button>
          </div>

          <div class="pricing-item">
            <div class="sale-box">
              <span class="on_sale wow fadeIn" data-wow-duration="1s" data-wow-delay="1s">HOT</span>
            </div>
            <h2>Premium</h2>
            <h3>$79/<span>mo</span></h3>
            <p class="odd-item-list">20 Website</p>
            <p>30 GB Storage</p>
            <p class="odd-item-list">200 GB Bandwith</p>
            <p>8 Month Support</p>
            <p class="odd-item-list">Unlimited Subdomains</p>
            <p>50 Database</p>
            <button class="wow slideInUp" data-wow-duration=".7s" data-wow-delay=".7s">Buy Now</button>
          </div>


          <div class="pricing-item">
            <h2>Professional</h2>
            <h3>$99/<span>mo</span></h3>
            <p class="odd-item-list">90 Website</p>
            <p>100 GB Storage</p>
            <p class="odd-item-list">Unlimited Bandwith</p>
            <p>1 Year Support</p>
            <p class="odd-item-list">Unlimited Domains</p>
            <p>Unlimited Database</p>
            <button class="wow slideInDown" data-wow-duration=".9s" data-wow-delay=".9s">Buy Now</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

有人能告诉我怎么解决这个问题？提前谢谢。

Answer 1

在.pricing-item中，添加以下内容：

position: relative;

然后，在.sale-box中，将right: 15px更改为right: 0;

Answer 2

看看这支笔。

https://codepen.io/faw/pen/xdreZe

设置你的。

.pricing-item{
 position: relative;
 }

和你的.sale-item：

.sale-box{
 position: absolute;
 top: 0;
 right: 0;

}

如何在特定位置阻止div？

2 个答案: