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