التحضير أولاً قم بإعداد صفحتك وصورتك، نستخدم هذه الصورة:
نحن ببساطة نكتب HTML مثل هذا:
| <div معرف = "حاوية"> <img id="logo" src="logo.png" alt="لي مونرو" /> </div> |
قد يبدو نمط CSS كما يلي:
| body{background:#999;} #حاوية{ العرض: 960 بكسل؛ الخلفية:#ففف؛ الهامش: 20 بكسل تلقائي؛ الحشو: 10 بكسل؛ } |
فيما يلي معاينة للتأثير:
اضبط على الموضع النسبي عندما نضع الشعار، نريد أن يكون موضعه نسبيًا بالنسبة للحاوية، لذا استخدم الموضع النسبي:
| #حاوية{ العرض: 960 بكسل؛ الخلفية:#ففف؛ الهامش: 20 بكسل تلقائي؛ الحشو: 10 بكسل؛ الموقف:نسبي؛ } |
ضعه خارج الصندوق الآن كل ما عليك فعله هو وضع الشعار، ووضعه أفقيًا بحيث يبرز من الحاوية.
| #الشعار{ الموقف:مطلق؛ اليسار: -15 بكسل؛ } |
الآن، يمكننا أن نرى أن الشعار معروض خارج الصندوق.
