Paragraph overlapping images

Question

My english is bad, so i try you to explain my problem on the picture :)
My problem: Click!

My 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>

My css:

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

Can somebody help me with my problem?

Answer 1

You can change the position of the button to be relative

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

Answer 2

I don't think I'd do it the way any of the answers have suggested except for changing the button to relative so here's my answer:

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

Basically, give a height to the videobox div (it has zero height because of the absolute positioning).

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

The 281px is a bit of a magic number fix, I just used the height of the resized thumbnail.

Answer 3

Just change your code from

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

to

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

here is a jsfiddle link

Answer 4

Because you are absolutely positioning items. You could add this CSS to your last <p> tag.

position: absolute;
top: 330px;

Answer 5

You can set a <p> for child like this...

Here is your answer

FIDDLE

CSS

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

Also you can assign this code for all paragraph after image

CSS

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

HERE IS YOUR ANSWER