Тег H поверх тега div с использованием CSS
Я хотел бы отобразить тег H поверх блока .entry-image, чтобы казалось, что .entry-image является фоном для тега H.
Это структура моего кода:
<div class = "entry-image">
<a href = "http://metromom.net/blog-category/newspaper-article/" rel = "bookmark">
<img src = "myphoto.jpg">
</a>
</div>
<h4 class = "entry-title">Title </h4>
Я не могу редактировать HTML, потому что он выводится плагином WordPress; и поэтому требуется подход, использующий только CSS.
поместите его сверху ...
Ваш вопрос слишком общий. Потому что я могу ответить, что вам нужно написать <h1> You title </h1> непосредственно перед вашим div. Сразу после открывающего тега вашего div. Но я думаю, это не то, что вам нужно. Или, может быть, вы хотите, чтобы ваш h4 отображался в вашем div, но только с CSS, а не в структуре html. Так что нам также понадобится ваш css.
@Narxx да, я хочу, чтобы div был фоном h4
@AlexVand Я не могу изменить структуру кода, так как это плагин для wordpress. Я просто буду манипулировать с помощью CSS.
@Narxx зачем добавлять рабочий сниппет для этого кода? какова цель ... мы не видим проблемы или поведения ... он только предоставил код без CSS и попросил нас выполнить задание, так что рабочий фрагмент добавит к вопросу?
Поэтому нам понадобится ссылка на ваш сайт или CSS для этого html.
Ответы 2
На самом деле нет надежного способа сделать это с помощью CSS, основанного на структуре вашего HTML. В идеале вы должны иметь возможность перемещать H4 внутри div "entry-image", а затем абсолютно позиционировать его:
.entry-image {
position: relative;
}
.entry-title {
position: absolute;
top: 15px;
left: 15px;
}<div class = "entry-image">
<h4 class = "entry-title">Title </h4>
<a href = "http://metromom.net/blog-category/newspaper-article/" rel = "bookmark">
<img src = "http://via.placeholder.com/350x150">
</a>
</div>тем не мение, если вы не можете редактировать вывод кода плагином - вы можете обернуть его контейнером (в зависимости от того, как / где вывод генерируется в вашей теме). Вы можете сделать что-то вроде этого:
.your-wrapping-container {
position: relative;
}
.entry-title {
position: absolute;
top: 15px;
left: 15px;
}<div class = "your-wrapping-container">
<div class = "entry-image">
<a href = "http://metromom.net/blog-category/newspaper-article/" rel = "bookmark">
<img src = "http://via.placeholder.com/350x150">
</a>
</div>
<h4 class = "entry-title">Title </h4>
</div>Если это также невозможно, следующим вариантом будет Javascript, так как вам нужно будет вычислить позицию div "entry-image" относительно документа; а затем используйте эту информацию, чтобы разместить элемент «entry-title».
Что-то вроде этого могло бы вам помочь:
var entryImagePosition = $('.entry-image').offset();
$('.entry-title').css({position: 'absolute', top: entryImagePosition.top+15, left: entryImagePosition.left+15});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "entry-image">
<a href = "http://metromom.net/blog-category/newspaper-article/" rel = "bookmark">
<img src = "http://via.placeholder.com/350x150">
</a>
</div>
<h4 class = "entry-title">Title </h4>Надеюсь это поможет!
На самом деле есть довольно надежный способ: order из спецификации Flexbox
Я не рассматривал свойство order из спецификации Flexbox, потому что оно не выполняло бы то, что они хотели. Они не просят разместить тег H над изображением, они просят, чтобы он располагался поверх изображения. По этой причине я рекомендовал абсолютно позиционировать тег H.
Как минимум 2 решения:
Просто измените порядок тега H и изображения (простое и правильное решение):
<h4 class = "entry-title">Title </h4>
<div class = "entry-image">
<a href = "http://metromom.net/blog-category/newspaper-article/" rel = "bookmark">
<img src = "myphoto.jpg">
</a>
</div>Или используйте CSS, чтобы расположить их обоих. Он более сложен и имеет больше «фиксированных» значений, но не меняет структуру вашей DOM. Самая важная вещь здесь, чтобы заставить его работать, - установить значение «position» на «relative» или «absolute» для родителя ОБЕИ H и изображения («main» элемент в фрагменте ниже):
.main {
position: relative;
border: 1px solid;
}
.entry-image {
/* Adapt the margin-top value to make space for H tag */
margin-top: 3em;
/*
Or position it absolute
position: absolute;
top: 3em;
*/
}
.entry-title {
position: absolute;
top: 0px;
}<div class = "main">
<div class = "entry-image">
<a href = "http://metromom.net/blog-category/newspaper-article/" rel = "bookmark">
<img src = "myphoto.jpg">
</a>
</div>
<h4 class = "entry-title">Title </h4>
</div>
Вы хотите, чтобы изображение было фоновым?