Мой английский плохой, поэтому я пытаюсь объяснить свою проблему на картинке :)
Моя проблема: нажмите!
Мой 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;
}
Может ли кто-нибудь помочь мне с моей проблемой?
Вы можете изменить положение кнопки относительно
#button{
width: 500px;
position: relative;
}
Я не думаю, что сделал бы это так, как предложил любой из ответов, кроме как изменить кнопку на relative
поэтому вот мой ответ:
В принципе, дайте высоту videobox
div (он имеет нулевую высоту из-за абсолютного позиционирования).
.videobox{
position: relative;
height: 281px;
}
281px
- это немного исправление магического числа, я просто использовал высоту уменьшенного размера миниатюры.
Просто измените свой код на
#thumb{
width: 500px;
position: absolute;
}
в
#thumb{
width: 500px;
position: relative;
}
здесь ссылка jsfiddle
Потому что вы абсолютно позиционируете предметы. Вы можете добавить этот CSS в свой последний <p>
.
position: absolute;
top: 330px;
Вы можете установить <p>
для этого ребенка...
Вот ваш ответ
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%;
}