基于一个在绝对位置移动两个元素中的一个

Question

我正在开展一个项目：

＆＃13;

＆＃13;

.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:	10px 0 0 10px;
    width: 95px;
    height: 32px;
	z-index:20;
	position:relative;
}

.carousel-promo .product-out-of-stock{
    color: #c15017;;
    font-weight: bold;
    line-height: 55px;
    margin:	10px 0 0 10px;
    width: 95px;
    height: 32px;
	z-index:20;
	position:relative;
}

.carousel-promo .product-price{
    float: right;
    margin:	10px 10px 0 0;
    color:  #4e4e4e;
    font-weight: bold;
    font-size: 20px;
    padding-top: 6px;
	z-index:20;
	position:relative;
}

.carousel-promo .sale_badge{
	position:absolute;
	z-index:2;
	top:-3px;
	left:-3px;
	width:60px;
	height:60px;
	transition: all 150ms ease-in-out 0s;
	border-radius:50%;
	line-height:60px;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
	font-size:14px;
	color:#ffffff;
	background-color:#83d4fb;
	font-weight:bold;
	text-align:center;
}

.carousel-promo .image{
	position: absolute;
    left: 0;
    right: 0;
}

＆＃13;

<div class="carousel-promo">
			
<div class="item">
				<div class="sale_badge">-20%</div>
				<div class="image"><img src="http://placehold.it/250x150"  alt="" /></div>
				<button>Buy Now!</button>
            	<p class="product-price">$599.00</p>
			</div>
      </div>

＆＃13;

＆＃13;

＆＃13;

我想要做的是得到这样的事情：

但我面临两个问题： 1-我无法像上图一样放置价格标签 2-使用按钮top: 170px;上的css属性Buy Now和价格将帮助我将它们放在图像下面。是否有可能在不使用css属性Buy Now的情况下将按钮top: 170px;和价格放在所需的位置？

请帮我解决这个问题。

Answer 1

＆＃13;

＆＃13;

.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:	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:	10px 0 0 10px;
    width: 95px;
    height: 32px;
	z-index:20;
	position:relative;
}

.carousel-promo .product-price{
    float: right;
    margin:	10px 10px 0 0;
    color:  #4e4e4e;
    font-weight: bold;
    font-size: 20px;
    padding-top: 6px;
	z-index:20;
	/*position:relative;*/ /*remove this property*/
}

.carousel-promo .sale_badge{
	position:absolute;
	z-index:2;
	top:-30px; /*Up to 30*/
	left:-30px; /*Up to 30*/
	width:60px;
	height:60px;
	transition: all 150ms ease-in-out 0s;
	border-radius:50%;
	line-height:60px;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
	font-size:14px;
	color:#ffffff;
	background-color:#83d4fb;
	font-weight:bold;
	text-align:center;
}

.carousel-promo .image{
	/*position: absolute;
    left: 0;
    right: 0;*/ /*REMOVE absolute*/
}

＆＃13;

<div class="carousel-promo">
			
<div class="item">
				<div class="sale_badge">-20%</div>
				<div class="image"><img src="http://placehold.it/250x150"  alt="" /></div>

				<button>Buy Now!</button>
            	<p class="product-price">$599.00</p>
            </div>
      </div>

＆＃13;

＆＃13;

＆＃13;