javascript - 难以定位使用 CSS 滑动的 div

Question

请看这个Fiddle .正如您将看到的，成本 div 是相对定位的，但我想绝对定位它。但是定位它绝对会将它发送到页面底部。

.wrapper
{
width:200px;
height:200px;
border:solid 2px red;
}
.container
{
width:200px;
height:200px;
background-color:#000;
position:;
}
.image
{
position:;
top:0px;
left:0px;
background-image:url(http://www.sat2home.com/satspacer//mobile/MobileTV.jpg);
background-position:50% 50%;
background-size:contain;
background-repeat:no-repeat;
z-index:1;
}
.cost
{
position:relative;
height:30px;
left:0px;
right:0px;
bottom:0px;
background-color:red;
color:#000;
font-size:13px;
padding-top:170px;
transition:all linear 0.5s;
-moz-transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
z-index:-1;
}

Answer 1

您需要将 .wrapper 元素位置设置为 relative 或 absolute。

.wrapper
{
    width:200px;
    height:200px;
    border:solid 2px red;
    position:relative;
}

因为 absolute 元素是根据绝对或相对定位的最近的祖先来定位的。

如果您为 .container 元素设置相同的内容，这甚至应该有效

Check Fiddle