0
に基づいて絶対位置に2つの要素の1：やろうとしています何移動私はここで入手可能であるプロジェクトに取り組んでいます1
.carousel-promo {
font:normal 14px sans-serif;
width: 250px;
}
.carousel-promo button{
border-radius: 2px;
background-color: #87bae1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
border: 0;
color: #ffffff;
font-weight: bold;
font-size: 13px;
cursor: pointer;
margin: \t 10px 0 0 10px;
width: 95px;
height: 32px;
\t z-index:20;
\t position:relative;
}
.carousel-promo .product-out-of-stock{
color: #c15017;;
font-weight: bold;
line-height: 55px;
margin: \t 10px 0 0 10px;
width: 95px;
height: 32px;
\t z-index:20;
\t position:relative;
}
.carousel-promo .product-price{
float: right;
margin: \t 10px 10px 0 0;
color: #4e4e4e;
font-weight: bold;
font-size: 20px;
padding-top: 6px;
\t z-index:20;
\t position:relative;
}
.carousel-promo .sale_badge{
\t position:absolute;
\t z-index:2;
\t top:-3px;
\t left:-3px;
\t width:60px;
\t height:60px;
\t transition: all 150ms ease-in-out 0s;
\t border-radius:50%;
\t line-height:60px;
\t box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
\t font-size:14px;
\t color:#ffffff;
\t background-color:#83d4fb;
\t font-weight:bold;
\t text-align:center;
}
.carousel-promo .image{
\t position: absolute;
left: 0;
right: 0;
}<div class="carousel-promo">
\t \t \t
<div class="item">
\t \t \t \t <div class="sale_badge">-20%</div>
\t \t \t \t <div class="image"><img src="http://placehold.it/250x150" alt="" /></div>
\t \t \t \t <button>Buy Now!</button>
\t <p class="product-price">$599.00</p>
\t \t \t </div>
</div>は、このようないくつかのことを得ることです： 
しかし、私は二つの問題直面しています：私はちょうど上の画像 2 - Usin上のような値札を配置することができません 1-ボタンBuy NowのCSSプロパティと価格は、画像の下にそれらを配置するのに役立ちます。 cssプロパティtop: 170px;を使わずに希望の場所にボタンBuy Nowと価格を置く可能性はありますか？
この問題を解決するのに役立ちます。あなたの助けを提供するための
感謝。 – Prince