CSSÖÐpositionµÄabsoluteºÍrelativeµÄÓ¦ÓÃ
positionÊôÐÔÆäʵÊÇÖ¸±¾Ìå¶ÔÉϼ¶µÄ¶¨Î»¡£Èç¹ûÕâôÀí½â£¬¾ÍºÃ°ìÁË¡£
ĬÈϵÄÊôÐÔÖµ¶¼ÊÇstatic£¬¾²Ì¬¡£¾Í²»Óöà˵ÁË¡£×î¹Ø¼üµÄÊÇ
relative£¨Ïà¶Ô£©ÒÔ¼°absolute£¨¾ø¶Ô£©¡£
ÍùÍùÎÒÃÇÈç¹ûÊÇCOPY±ðÈ˵ĴúÂ룬»á°ÑabsoluteÊôÐÔÓëleft¡¢topÅäºÏÆðÀ´ÖÆ×÷Ïà¹ØµÄ“Ðü¸¡²ã”Ч¹û¡£È»¶øÓÐʱºòÎÒÃÇÐèÒªÕë¶Ôijһ¸öÈÝÆ÷µÄÐü¸¡Ð§¹û£¬¶ø²»ÊÇÕë¶Ô´°¿ÚµÄ¡£Õâʱºòͨ¹ý¸ß¶È¡¢¿í¶ÈµÄ¼ÆËã²»µ«Âé·³£¬¶øÇÒ¼¸ºõÎÞ·¨ÍêÃÀʵÏÖЧ¹û¡£ÎÒÒ»¿ªÊ¼Ò²ÎÞÄÜΪÁ¦£¬ºóÀ´·¢ÏÖÖ»Òª°ÑÆäÉÏÒ»¼¶µÄÑùʽÊôÐÔpositionÉèÖÃΪrelative¾Í¿ÉÒÔÁË¡£
Ò²¾ÍÊÇ˵£¬positionµÄÊôÐÔÖµµÄЧ¹û£¬Ö±½ÓÊÜÆäÈÝÆ÷ÑùʽÖÐpositionÊôÐÔÖµÓ°Ïì¡£
ÀýÈçÈçÏÂA-BµÄǶÌ׽ṹ
<div id="A">
<div id="B">
</div>
</div>
µ±AµÄpositionΪrelativeʱ£¬BµÄpositionΪabsolute²ÅÓÐЧ¡£Õâʱºòleft:0¡¢top:0¾Í²»ÔÙÕë¶Ô´°¿ÚÎĵµ£¬¶øÊÇÕë¶ÔidΪAµÄÕâ¸ödivÁË¡£
ÕâÑùÔÚ¿ª·¢Ò»Ð©»ùÓÚB/SÓ¦ÓóÌÐòµÄʱºò£¬¾ÍÄܷܺ½±ãµÄÌí¼ÓһЩUIÔªËØ£¬ÀýÈçijһ¸ö»î¶¯²ãµÄ¹Ø±Õ°´Å¥µÈ¡£
±¾ÎÄÀ´×Ô£ºhttp://www.awflasher.com/blog/archives/731
Ïà¹ØÎĵµ£º
¼¸ºõ Menu ¿Ø¼þÍâ¹ÛµÄ¸÷¸ö·½Ãæ¶¼¿ÉÒÔʹÓà Menu ¿Ø¼þµÄÊôÐÔ»ò¼¶ÁªÑùʽ±í (CSS) À´¹ÜÀí¡£Í¨¹ýÁ˽âÄÄЩÊôÐÔ¿ØÖƳÊÏÖµÄÄÄЩ·½Ã棬¿ÉÒÔ¶¨ÖƲ˵¥µÄÍâ¹Û¡£±¾Ö÷Ìâ½éÉÜÓÉ Menu ¿Ø¼þ¹«¿ªµÄÑùʽÀàÐÍ£¬²¢½¨ÒéһЩʹÓà Menu ¿Ø¼þÉèÖÃÑùʽµÄ×î¼Ñ×ö·¨¡£
¿ÉÒÔÖ±½ÓÔÚ±ê¼ÇÖÐÉèÖø÷ÖÖÑùʽµÄÊôÐÔ»òʹÓÃÑùʽ±í ......
²âÊÔ»·¾³£ºIE6 , IE7, IE8, FF3.0
±í´ï·½Ê½£º±í´ï·½Ê½£º
body { `background:red }
body { ~background:red }
body { !background:red }
body { @background:red }
body { #background:red }
body { $background:red }
body { %background:red }
body { ^b ......
DIV+CSSÍøÒ³²¼¾Ö£ºÈýÁи¡¶¯ÖмäÁпí¶È×ÔÊÊÓ¦
ÒÑÓÐ 39 ´ÎÔĶÁ 2009-09-07 14:25 ±êÇ©: DIV CSS ÍøÒ³ ¿í¶È
ʹÓø¡¶¯¶¨Î»·½Ê½£¬´ÓÒ»Áе½¶àÁеĹ̶¨¿í¶È¼°×ÔÊÊÓ¦£¬»ù±¾ÉÏ¿ÉÒÔ¼òµ¥Íê³É£¬°üÀ¨ÈýÁеĹ̶¨¿í¶È¡£¶øÔÚÕâÀï¸øÎÒÃÇÌá³öÁËÒ»¸öеÄÒª ......
µ±Í¬Ò»¸ö HTML ÔªËØ±»²»Ö¹Ò»¸öÑùʽ¶¨Òåʱ£¬»áʹÓÃÄĸöÑùÊ½ÄØ£¿
Ò»°ã¶øÑÔ£¬ËùÓеÄÑùʽ»á¸ù¾ÝÏÂÃæµÄ¹æÔò²ãµþÓÚÒ»¸öеÄÐéÄâÑùʽ±íÖУ¬ÆäÖÐÊý×Ö 4 ÓµÓÐ×î¸ßµÄÓÅÏÈȨ¡£
1.
ä¯ÀÀÆ÷ȱʡÉèÖÃ
2.
ÍⲿÑùʽ±í
3.
ÄÚ²¿Ñùʽ±í£¨Î»ÓÚ <head> ±êÇ ......
ҳͷ£ºheader
µÇ¼Ìõ£ºloginBar
±êÖ¾£ºlogo
²àÀ¸£ºsideBar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubNav
²Ëµ¥£ºmenu
×Ӳ˵¥£ºsubMenu
ËÑË÷£ºsearch
¹ö¶¯£ºscroll
Ò³ÃæÖ÷Ì壺main
ÄÚÈÝ£ºcontent
±êǩҳ£ºtab
ÎÄÕÂÁÐ±í£ºlist
ÌáʾÐÅÏ¢£ºmsg
С¼¼ÇÉ£ºtips
À¸Ä¿±êÌ⣺title
¼ÓÈ룺joinus
Ö¸ÄÏ£ºguild
·þÎñ£ºse ......