将div滑入绝对定位的div下方

时间:2012-04-23 18:55:35

标签: css positioning

http://jsfiddle.net/FUqhb/

我需要移动播放器,使其始终保持在CD封面下方。 我无法更改html(我可以添加内容,但我无法更改顺序或删除内部的内容)而且我无法为播放器设置固定的margin-top。除此之外,任何想法?

我试过显示:阻止但它不起作用,可能是因为它是一个绝对定位的div。

2 个答案:

答案 0 :(得分:1)

jsFiddle:http://jsfiddle.net/FUqhb/11/

您可以添加一个height:200px的div,这将推动该栏。

<div class="audio_player">
     <div style="height:200px"></div>
     <embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=somefile.mp3" height="27" width="207"/>
</div>

答案 1 :(得分:0)

关闭套筒的绝对位置:

.turntable {
    width: 100%;
    height: 200px; /* cd height */
    position: relative;
}

.artwork,
.gloss,
.sleeve {

    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.gloss {
    background: url('http://i.imgur.com/JrVdR.png');
    position:absolute;
    top:0;left:0
}

.sleeve {
    background: url('http://i.imgur.com/VjVh1.jpg') no-repeat;
    width: 200px; /* cd width */
}