Relative positioning
¢¸ ¢º
Block-levelÀ̳ª inline layout¿¡ ÀÇÇØ À§Ä¡°¡ °áÁ¤µÇ¸é, ÀÌ À§Ä¡¸¦ ±âÁØÀ¸·Î box¸¦ »óÇÏÁ¿ì·Î À̵¿½Ãų ¼ö ÀÖ´Ù. ÀÌ°ÍÀ» »ó´ëÀû ¹è¿(relative positioning)À̶ó°í ÇÑ´Ù. À̵¿½ÃÅ°´Â Á¤µµ´Â
top, left, bottom, right ¼Ó¼ºÀ¸·Î ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. BoxÀÇ À§Ä¡¸¦ À̵¿½ÃŲ´Ù°í Çؼ ´ÙÀ½¿¡ ³ª¿À´Â ÇüÁ¦ÀڸŠelementÀÇ À§Ä¡°¡ ÇÔ²² À̵¿µÇ´Â °ÍÀº ¾Æ´Ï´Ù. µû¶ó¼, »ó´ëÀû ¹è¿À» ÀÌ¿ëÇϸé, element boxµéÀÌ ¼·Î °ãÃÄÁö´Â È¿°ú¸¦ °¡Á®¿Ã ¼ö ÀÖ´Ù.
¡Ø P¾È¿¡ SPANÀÌ Æ÷ÇԵǴ °æ¿ì, P´Â SPANÀÇ ºÎ¸ð(parent) element°¡ µÇ°í, SPANÀº PÀÇ ÀÚ½Ä(child) element°¡ µÈ´Ù. P ´ÙÀ½¿¡ ´Ù¸¥ P°¡ ¿Ã °æ¿ì, µÎ °³ÀÇ P´Â ¼·Î ÇüÁ¦ÀڸŠ°ü°è(sibling)°¡ µÈ´Ù. P¾È¿¡ ÀÖ´Â SPAN ¾È¿¡ ´Ù½Ã EMÀÌ Æ÷ÇԵȴٸé, P´Â EMÀÇ Á¶»ó(ancestor)ÀÌ µÇ°í, EMÀº PÀÇ ÈļÕ(descendant)ÀÌ µÈ´Ù.
ºÎ¸ð element°¡ »ó´ëÀû ¹è¿¿¡ ÀÇÇØ À§Ä¡°¡ º¯°æµÇ¸é, ÀÚ½Ä element´Â º¯°æµÈ À§Ä¡¸¦ ±âÁØÀ¸·Î ¹è¿µÈ´Ù.
ÇϳªÀÇ element box¸¦ »ó´ëÀûÀ¸·Î ¹è¿ÇÏ·Á¸é,
position ¼Ó¼ºÀÇ °ªÀ» relative·Î ÁÖ¾î¾ß ÇÑ´Ù.
¢¸ ¢º