1

この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;
}
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

Ankit さん、div に を渡すことができます。div に を渡すposition:relative;場合container はposition:absolute;、cost ページの下部に移動しないので、更新された css を参照してください:-

基本的に、親 div が position:relative; を使用している場合。そしてあなたの子 div と position: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 に答える
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 
.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

あなたのに次のルールを入れてみてくださいdiv.container：

div.container { position: relative; }

ここにデモがあります：

于 2013-06-21T05:12:38.703 に答える