سلام
متنی رو با
";style="position:relative; top:-500px
بر روی عکسی قرار میدم و در حالت صفحه نمایش دسکتاپ مشکلی ندارم اما به محض تغییر سایز صفحه متن هم بخاطر تغییر سایز صفحه نمایش مثلا از دسکتاپ به موبایل تغییر جا میده و از روی عکس به محل دیگه جابجا میشه
راهکاری دارید که این اتفاق نیفته و کد رو بهش اصلاح کنم
سلام
دوست عزیز شما میتونید یک div به عنوان پرنت درست کنید و position:relative; قرار بدید و تگ img عکس و متن را داخلش قرار بدید برای عکس اندازه میخواهید بذارید و برای متن position: absolute; را و از top بالا و چپ left 50% فاصله بدید طوری که وسط قرار بگیره .
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position exempel</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
max-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
position: relative;
padding: 10px;
}
img {
width: 100%;
}
h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #6c4ada;
}
</style>
</head>
<body>
<div class="parent">
<img src="./image.jpg" alt="img-img">
<h3>Text over image</h3>
</div>
</body>
</html>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟