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元素是基于closest ancestor that is absolutely or relatively positioned.

定位的

如果为.container元素设置相同

，这甚至可以工作

<强> Check Fiddle

Answer 2

尝试将以下规则放在div.container：

中

div.container { position: relative; }

这是DEMO：

Answer 3

将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;
}

Answer 4

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

在你的小提琴中进行了一些修改 - Here

Answer 5

Hey Ankit您可以将position:relative;提供给container div ，而不是将position:absolute;提供给cost div 所以它不会到页面底部看到更新的css： -

基本上，如果你的父div有位置：relative;和你的孩子一起玩位置：绝对的;因此，您的孩子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;
}

DEMO

使用CSS滑动div的位置有困难

5 个答案: