positionª©¥»¡GCSS2¡@ Ý®e©Ê¡GIE4+ NS4+¡@Ä~©Ó©Ê¡GµL
»yªk¡G
position : static | absolute | fixed | relative
¨úÈ¡G
static | :’ | Àq»{È¡CµL¯S®í©w¦ì¡A¹ï¹³¿í´`HTML©w¦ì³W«h |
absolute | :’Â |
±N¹ï¹³±q¤åÀɬy¤¤©ì¥X¡A¨Ï¥Î left ¡A right ¡A top ¡A bottom µ¥Äݩʬ۹ï©ó¨ä³Ì±µªñªº¤@ӳ̦³©w¦ì³]¸mªº¤÷¹ï¹³¶i¦æµ´¹ï©w¦ì¡C¦pªG¤£¦s¦b³o¼Ëªº¤÷¹ï¶H¡A«h¨Ì¾Ú body ¹ï¶H¡C¦Ó¨ä¼hÅ|³q¹L z-index ÄÝ©Ê©w¸q |
fixed | :’ | ¥¼¤ä«ù¡C¹ï¹³©w¦ì¿í±qµ´¹ï(absolute)¤è¦¡¡C¦ý¬On¿í¦u¤@¨Ç³W½d |
relative | :’ | ¹ï¹³¤£¥i¼hÅ|¡A¦ý±N¨Ì¾Ú left ¡A right ¡A top ¡A bottom µ¥Äݩʦb¥¿±`¤åÀɬy¤¤°¾²¾¦ì¸m |
»¡©ú¡G
À˯Á¹ï¶Hªº©w¦ì¤è¦¡¡C
³]¸m¦¹ÄÝ©ÊȬ°
absolute ·|±N¹ï¹³©ìÂ÷¥X¥¿±`ªº¤åÀɬyµ´¹ï©w¦ì¦Ó¤£¦Ò¼{¥¦©P³ò¤º®eªº§G§½¡C°²¦p¨ä¥L¨ã¦³¤£¦P
z-index Äݩʪº¹ï¶H¤w¸g¦û¾Ú¤Fµ¹©wªº¦ì¸m¡A¥L̤§¶¡¤£·|¬Û¤¬¼vÅT¡A¦Ó·|¦b¦P¤@¦ì¸m¼hÅ|¡C¦¹®É¹ï¹³¤£¨ã¦³¥~¸É¤B(
margin )¡A¦ý¤´¦³¤º¸É¤B(
padding )©MÃä®Ø(
border )¡C
n¿E¬¡¹ï¶Hªºµ´¹ï(
absolute)©w¦ì¡A¥²¶·«ü©w
left ¡A
right ¡A
top ¡A
bottom Äݩʤ¤ªº¦Ü¤Ö¤@Ó¡A¨Ã¥B³]¸m¦¹ÄÝ©ÊȬ°
absolute ¡C§_«h¤WzÄÝ©Ê·|¨Ï¥Î¥L̪ºÀq»{È
auto ¡A³o±N¾ÉP¹ï¹³¿í±q¥¿±`ªºHTML§G§½³W«h¡A¦b«e¤@ӹﹳ¤§«á¥ß§Y³Q§e»¼¡C
³]¸m¦¹ÄÝ©ÊȬ°
relative ·|«O«ù¹ï¹³¦b¥¿±`ªºHTML¬y¤¤¡A¦ý¬O¥¦ªº¦ì¸m¥i¥H®Ú¾Ú¥¦ªº«e¤@ӹﹳ¶i¦æ°¾²¾¡C¦b¬Û¹ï(
relative)©w¦ì¹ï¹³¤§«áªº¤å¥»©Î¹ï¹³¦û¦³¥L̦ۤvªºªÅ¶¡¦Ó¤£·|Âл\³Q©w¦ì¹ï¶Hªº¦ÛµMªÅ¶¡¡C»P¦¹¤£¦Pªº¡A¦bµ´¹ï(
absolute)©w¦ì¹ï¹³¤§«áªº¤å¥»©Î¹ï¹³¦b³Q©w¦ì¹ï¹³³Q©ìÂ÷¥¿±`¤åÀɬy¤§«e·|¦û¦³¥¦ªº¦ÛµMªÅ¶¡¡C©ñ¸mµ´¹ï(
absolute)©w¦ì¹ï¹³¦b¥iµø°Ï°ì¤§¥~·|¾ÉPºu°Ê±ø¥X²{¡C¦Ó©ñ¸m¬Û¹ï(
relative)©w¦ì¹ï¹³¦b¥iµø°Ï°ì¤§¥~¡Aºu°Ê±ø¤£·|¥X²{¡C
¤º®eªº¤Ø¤o·|®Ú¾Ú§G§½½T©w¹ï¶Hªº¤Ø¤o¡C¨Ò¦p¡A³]¸m¤@Ó
div ¹ï¶Hªº
height ©M
position ÄÝ©Ê¡A«h
div ¹ï¶Hªº¤º®e±N¨M©w¥¦ªº¼e«×(
width )¡C
¦¹Äݩʹï©ó
currentStyle ¹ï¹³¦Ó¨¥¬O¥uŪªº¡C¹ï©ó¨ä¥L¹ï¹³¦Ó¨¥¬O¥iŪ¼gªº¡C
¹ïÀ³ªº¸}¥»¯S©Ê¬°
position ¡C
¥Ü¨Ò¡G
div { position:relative; top:-3px }