هنا طريقة وضع صورة فوق صورة بإستخدام CSS وخاصية التموضع position

مثل رمز خرائط قوقل فوق صورة المحل

اولا نضع الصورتان داخل وسم واحد بهذه الطريقة :

<div class="images"><img class="image1" src="images/branch.jpg"><img class="image2" src="images/google-maps.png"></div>

وسم نعطيه كلاس images

بداخله صورتان

الاولى بكلاس image1

والثانيه بكلاس image2

الان نذهب لـ CSS

ونعطي الوسم هذه الخصائص:

.images { position: relative; width: 100%; height: 100%; }

ثم نعطي كلاس image1 هذه الخصائص:

.image1{ display: block; width: 100%; height: 250px; }

طبعا نتحكم بالارتفاع كما نريد لكن هنا وضع 250px للمثال فقط

ثم نعطي هذه كلاس image2 هذه الخصائص:

.image2 { position: absolute; width: 55px; left: 7%; bottom: 14%; }

طبعا من خلال هذه النسب width و left و bottom نتحكم في حجم وموقع الصورة

وستكون النتيجه في الاخير هكذا

وفي امان الله