مشکل با position:reative در حالت responsi
سلام
متنی رو با
";style="position:relative; top:-500px
بر روی عکسی قرار میدم و در حالت صفحه نمایش دسکتاپ مشکلی ندارم اما به محض تغییر سایز صفحه متن هم بخاطر تغییر سایز صفحه نمایش مثلا از دسکتاپ به موبایل تغییر جا میده و از روی عکس به محل دیگه جابجا میشه
راهکاری دارید که این اتفاق نیفته و کد رو بهش اصلاح کنم
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
Banana Life
@shift.delete
2 سال پیش
آپدیت شد
گزارش تخلف
کپی کردن
0
سلام
دوست عزیز شما میتونید یک 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>
گزارش تخلف
کپی کردن
0