1

请看这个小提琴。正如您将看到的，成本 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;
}
4

5 回答 5

1

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

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

因为absolute元素是根据closest ancestor that is absolutely or relatively positioned.

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

检查小提琴

于 2013-06-21T05:12:04.123 回答
0

添加 position:relative;到container类就可以了。

.container
{
width:200px;
height:200px;
background-color:#000;
position:;
}

添加position: absolute到cost班级

.cost
{
    position:absolute;
    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;
}
于 2013-06-21T05:18:01.743 回答
0

尝试将以下规则放入您的div.container：

div.container { position: relative; }

这是一个演示：

于 2013-06-21T05:12:38.703 回答
0 
.cost
{ 
    position:absolute;
    width:200px;
    height:30px;
    top:200px;
    left:10px;
    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;
}

在你的小提琴中做了一些修改 -这里

于 2013-06-21T05:22:11.610 回答
0

嘿，Ankit，您可以将其提供position:relative;给您的container div，而不是将其提供position:absolute;给您的cost div，这样它就不会进入页面底部，请查看更新后的 CSS：-

基本上，如果您的父 div 与 position:relative; 和你的孩子 div 位置：absolute; 因此，因此您的子 div 将在您的父 div 的控制下，并且不会自动离开父 div

CSS

.wrapper
{
    width:200px;
    height:200px;
    border:solid 2px red;
}
.container
{
    width:200px;
    height:200px;
    background-color:#000;
    position:relative;
}
.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:absolute;
    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;
}

演示

于 2013-06-21T05:26:41.540 回答