فرض کنید دو تگ img (یا هر المان دیگر) داریم و می خواهیم این دو را روی هم بندازیم. چطور می توانیم این کار را انجام دهیم؟
- نفیسه افقی 2 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
با کمک position: absolute
می توانید این کار را انجام دهید:
<!DOCTYPE html>
<html>
<head>
<title>Two Images on Top of Each Other</title>
<style>
.container {
position: relative;
width: 400px;
height: 400px;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
</div>
</body>
</html>
*در اینجا ما یک container
تعریف کردیم و position
آن را برابر releative
گذاشتم و بعد دو تگ img
تعریف کردیم و مقدار top: 0
و left: 0
را تعریف کردیم و position
آن ها را نیز absolute
گذاشتیم تا روی هم قرا بگیرند.
- نفیسه افقی 2 سال قبل پاسخ داد
- شما باید برای ارسال دیدگاه وارد شوید