Расположение текста в сетке CSS над изображением
У меня есть сетка CSS, где мне нужно разместить текст поверх изображения. Ниже показан код, который я использую без текста поверх изображения.
.sbp-item12 {
grid-row: 6 / 7;
grid-column: 9/13;
height: 250px;
}<div class = "sbp-item12">
<a href = "#">
<h3>Here is a headline</h3>
<figure>
<img src = "https://placehold.it/380x250">
</figure>
</a>
</div>Я попытался добавить в код следующее, но тогда текст идет внизу моей страницы и не остается внутри элемента сетки. Кто-нибудь знает, как я могу разместить текст поверх изображения в моем элементе сетки?
.sbp-item12 {
grid-row: 6 / 7;
grid-column: 9/13;
height: 250px;
}
.bottom-left {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 0;
right: 0;
bottom: 0;
}<div class = "sbp-item12">
<a href = "#">
<div class = "text-bottm-left">
<h3>Here is a headline</h3>
</div>
<figure>
<img src = "https://placehold.it/380x250">
</figure>
</a>
</div>
Ответы 5
Вы просто ошиблись в своем коде, измените это class = "text-bottm-left" и добавьте class = "bottom-left" Надеюсь, это сработает.
<div class = "sbp-item12">
<a href = "#">
<div class = "bottom-left">
<h3>Here is a headline</h3>
</div>
<figure>
<img src = "https://placehold.it/380x250">
</figure>
</a>
</div>
Попробуй это:
.sbp-item12 {
grid-row: 6 / 7;
grid-column: 9/13;
height: 250px;
}
div.img-post {
position: relative;
}
h3.img-title {
position: absolute;
z-index: 1;
left:175px;
}
img.img-body {
position: absolute
}<div class = "sbp-item12 img-post">
<a href = "#">
<h3 class = "img-title">Here is a headline</h3>
<figure>
<img class = "img-body" src = "https://placehold.it/380x250">
</figure>
</a>
</div>Спасибо за комментарий. К сожалению, это не работает. Если я использую класс img, это повлияет на все остальные мои изображения. Я попытался выделить изображение в отдельный класс, чтобы избежать этого, но текст все еще не находится внутри изображения :-(
Я обновил код и добавил несколько классов, чтобы это не повлияло на другие изображения в вашем коде.
Вам нужно установить родителя position:relative и установить position:absolute для div, который вы хотите поместить в bottom-left.
Примечание. Ваши классы Html и css не совпадают. Вам нужно их исправить. Ниже приведен рабочий фрагмент
.sbp-item12 {
grid-row: 6 / 7;
grid-column: 9/13;
height: 250px;
}
figure {
margin: 0;
position: relative
}
.bottom-left h3{
z-index: 100;
position: absolute;
color: black;
font-size: 24px;
font-weight: bold;
left: 0;
bottom: 0;
margin:0
}<div class = "sbp-item12">
<a href = "#">
<figure>
<img src = "https://placehold.it/380x250">
<div class = "bottom-left">
<h3>Here is a headline</h3>
</div>
</figure>
</a>
</div>Спасибо за ответ. Это похоже на что-то, спасибо. Затем я могу установить размещение текста с помощью top, right, bottom, right - это правильно?
Да, вы можете разместить текст в соответствии с вашими требованиями. Пожалуйста, примите ответ, если он вам помог. Удачного кодирования :)
Попробуй это:
* {
margin: 0;
padding: 0;
}
.bottom-left {
/* Insert your text styling here*/
color: white;
font-size: 24px;
font-weight: bold;
}
.sbp-item12 {
position: relative;
display: inline-block;
grid-row: 6 / 7;
grid-column: 9/13;
height: 250px;
}
.sbp-item12 .bottom-left {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
/* If text should be centered: */
/* text-align: center; */
}<div class = "sbp-item12">
<a href = "#">
<div class = "bottom-left">
<h3>Here is a headline</h3>
</div>
<figure>
<img src = "https://placehold.it/380x250" alt = "Here is a headline" />
</figure>
</a>
</div>Вам нужно установить родительский div в относительное положение с помощью position: relative, а затем после установки текста в абсолютное положение с помощью position: absolute.
Вы используете другое свойство CSS, такое как левое, правое, верхнее, нижнее, чтобы установить тест в любом месте.
@satyam-pathak Здесь речь идет о сетке CSS. Далеко не дубликат.