Как позиционировать текст поверх изображения (изображение НЕ фоновое) т.е. один слой поверх другого, Не используя комбинацию "Родитель - position: relative; потомок - position: absolute" ?
3 ответа
могу предложить 2 решения:
Использовать отрицательный отступ для блока с текстом
textdiv { max-width: 400px; } img { width: 100%; } .text { margin-top: -150px; color: #fff; }
- Использовать трансформацию для блока с текстом
.text { transform: translateY(-150px); }
Можно классу придать свойство "position: relative;" И далее указывать позицию относительно текущего местоположения. То есть, "top: -30px;" - значит, что элемент нужно поднять на верх на 30 пикселей. Аналогично вправо, вниз, влево.
figure {
width: 30%;
text-align: center;
font-size: smaller;
text-indent: 0;
}
figcaption{
position: relative;
top: -70px;
color: #fff;
}
img.scaled {
width: 100%;
}
<figure>
<p><img class=scaled src="https://media.archonia.com/images/samples/38/96/43896_s0.jpg" alt="St. Tropez">
<figcaption>Saint Tropez and its fort in the evening sun</figcaption>
</figure>
кстати, в интернетах видел очень много вариантов через position
, но никто не предложил вариант через display
. надеюсь я смогу кому-то помочь. Основной класс для позиционирования текста на изображении .flex-col-c-m И да, этот вариант НЕ ЛОМАЕТ АДАПТИВ как это делает position: absolute;
Если кому надо без position: absolute;
.wrap-slick1{
position: relative;
}
.item-slick1 {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin-top: 100px;
}
.item-slick1 {
height: 100vh;
}
.sizefull {
width: 100%;
height: 100%;
}
.flex-col-c-m {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-ms-align-items: center;
align-items: center;
justify-content: center;
}
h1 {color:white;}
<div class="item-slick1" style="background-image: url(https://avatars.mds.yandex.net/get-zen_doc/1219682/pub_5eaa7423102eee24419d5607_5eaa74d77e79087ec3668df9/scale_1200); border-radius: 10px;">
<div class="wrap-content-slide1 sizefull flex-col-c-m">
<h1>
Text
</h1>
</div>
</div>
z-index
&&display:flex;