请看这个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;
}
最佳答案
您需要将 .wrapper
元素位置设置为 relative
或 absolute
。
.wrapper
{
width:200px;
height:200px;
border:solid 2px red;
position:relative;
}
因为 absolute
元素是根据绝对或相对定位的最近的祖先来定位的。
如果您为 .container
元素设置相同的内容,这甚至应该有效
关于javascript - 难以定位使用 CSS 滑动的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17228059/