段落重叠图像

Question

我的英语不好，所以我试着在图片上解释我的问题 :)
我的问题：Click!

我的html：

<p>Some text</p>
<div class='videobox'>
  <img id='thumb' src='http://img.youtube.com/vi/ILw2sAT8mro/maxresdefault.jpg'>
    <img id='button' src='http://android.batarin.zp.ua/keddrreader/YouTube-icon-full_color.png'>
</div>
<p>Some text</p>

我的 CSS：

img{
  width: 100%;
}
.videobox{
  position: relative;
}
#thumb{
  width: 500px;
  position: absolute;
}
#button{
  width: 500px;
  position: absolute;
}
p{
  position: relative;
}

有人可以帮我解决我的问题吗？

Answer 1

除了将按钮更改为relative 之外，我不认为我会按照任何答案建议的方式进行操作，所以这是我的答案：

http://jsfiddle.net/6a6q4/2/

基本上，给videobox div 指定一个高度（由于绝对定位，它的高度为零）。

.videobox{
    position: relative;
    height: 281px;
}

281px 是一个神奇的数字修复，我只是使用了调整后缩略图的高度。

Answer 2

您可以将按钮的位置更改为相对

#button{
    width: 500px;
    position: relative;
}

Answer 3

只需更改您的代码

#thumb{
  width: 500px;
  position: absolute;
}

到

#thumb{
  width: 500px;
  position: relative;
}

这是一个jsfiddle 链接

Answer 4

因为您是绝对定位项目。您可以将此 CSS 添加到您的最后一个 <p> 标记中。

position: absolute;
top: 330px;

Answer 5

您可以为这样的孩子设置<p>...

这是你的答案

FIDDLE

CSS

  p:last-child {
        position: relative;
        display: -webkit-box;
        height: 100%;
        width: 100%;
        margin-top: 60%;
         }

您也可以为图片后的所有段落分配此代码

CSS

#p{
    position: relative;
    display: -webkit-box;
    height: 100%;
    width: 100%;
    margin-top: 60%;
}

HERE IS YOUR ANSWER