移兩種元素的一個絕對位置一個

Question

我工作的一個項目是可在這裏：

.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>

什麼我試圖做的是讓一些像這樣的事情：

但我面臨兩個問題：1 我無法將價格標籤放置就像上面的圖片 2-使用設在g按鈕Buy Now上的css屬性top: 170px;，價格將幫助我將它們放置在圖像下。有沒有可能將按鈕Buy Now和價格放在需要的地方而不使用css屬性top: 170px;？

請幫我解決這個問題。

Answer 1

.carousel-promo { 
 
    font:normal 14px sans-serif; 
 
    width: 250px; 
 
    position:relative;/* ADD THIS property */ 
 
} 
 

 
/* ADD THIS CLASS */ 
 
.carousel-promo.item{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.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; 
 
    z-index:20; 
 
    /*position:relative;*/ /*remove this property*/ 
 
} 
 

 
.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;*/ /*remove this property*/ 
 
} 
 

 
.carousel-promo .sale_badge{ 
 
\t position:absolute; 
 
\t z-index:2; 
 
\t top:-30px; /*Up to 30*/ 
 
\t left:-30px; /*Up to 30*/ 
 
\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;*/ /*REMOVE absolute*/ 
 
}

<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> 
 
      </div> 
 
     </div>