Параграф перекрывающихся изображений

0


Мой английский плохой, поэтому я пытаюсь объяснить свою проблему на картинке :)
Моя проблема: нажмите!

Мой 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;
}

Может ли кто-нибудь помочь мне с моей проблемой?

Теги:
image
paragraph

5 ответов

1
Лучший ответ

Вы можете изменить положение кнопки относительно

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

Я не думаю, что сделал бы это так, как предложил любой из ответов, кроме как изменить кнопку на relative поэтому вот мой ответ:

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

В принципе, дайте высоту videobox div (он имеет нулевую высоту из-за абсолютного позиционирования).

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

281px - это немного исправление магического числа, я просто использовал высоту уменьшенного размера миниатюры.

1

Просто измените свой код на

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

в

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

здесь ссылка jsfiddle

0

Потому что вы абсолютно позиционируете предметы. Вы можете добавить этот CSS в свой последний <p>.

position: absolute;
top: 330px;
0

Вы можете установить <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%;
}

ЗДЕСЬ - ВАШ ОТВЕТ

  • 0
    это работает, но если добавить еще один абзац, он снова сломается : jsfiddle.net/79SCj/4
  • 0
    @ martincarlin87: yha, видите, я назначил последнего ребенка в <p>, здесь, в вашем примере, вы дали "упс" <p> как последнего ребенка ... :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню