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
Ïà¹ØÎĵµ£º
ºÜ¶àʱºòÍøÒ³Éè¼ÆÖлáÓöµ½¾ÓÖд¦ÀíÎÊÌ⣬°üÀ¨ºáÏòˮƽ¾ÓÖкʹ¹Ö±ÊúÖ±¾ÓÖÐÎÊÌ⣬¶ÔÓÚÇ°ÕßÒ»°ãµÄ·½·¨¿ÉÒÔ²ÉÓÓtext-align:center”ºÍ“margin:0 auto”½øÐÐÓÐЧ¿ØÖÆ£¬Ïà¶Ô±È½Ï¼òµ¥Ò»Ð©£»¶ø´¹Ö±Ë®Æ½¾ÓÖеÄÎÊÌâ¾ÍÏԵò»ÊÇÄÇôÈÝÒס£
ÏÂÃæ±¾Õ¾¾Í´ËÎÊÌâ̸һµãCSS¶ÔÎı¾½øÐд¹Ö±ÊúÖ±¾ÓÖпØÖƵļ¼ÇÉ¡£
µ¥ÐÐÎ ......
1.span µÄ overflow :hidden width:70px ; display:block(Ò»µãÒª¼ÓÉÏdivµÄ»°²»Óüӣ©
2.js¶¯Ì¬»»±³¾°,»»±³¾° style.backgroundImage = "url('images/bg1.jpg')";
3.ÓÃonFocus="this.blur()"À´Ïû³ýÁ´½ÓºóµÄ½¹µãÐéÏß¿ò
4. onMouseOver onMouseOut onClick Èý¸öʱ¼äÔÚÒ» ......
DIV+CSSÍøÒ³²¼¾Ö£ºÈýÁи¡¶¯ÖмäÁпí¶È×ÔÊÊÓ¦
ÒÑÓÐ 39 ´ÎÔĶÁ 2009-09-07 14:25 ±êÇ©: DIV CSS ÍøÒ³ ¿í¶È
ʹÓø¡¶¯¶¨Î»·½Ê½£¬´ÓÒ»Áе½¶àÁеĹ̶¨¿í¶È¼°×ÔÊÊÓ¦£¬»ù±¾ÉÏ¿ÉÒÔ¼òµ¥Íê³É£¬°üÀ¨ÈýÁеĹ̶¨¿í¶È¡£¶øÔÚÕâÀï¸øÎÒÃÇÌá³öÁËÒ»¸öеÄÒª ......
µ±Í¬Ò»¸ö HTML ÔªËر»²»Ö¹Ò»¸öÑùʽ¶¨Òåʱ£¬»áʹÓÃÄĸöÑùʽÄØ£¿
Ò»°ã¶øÑÔ£¬ËùÓеÄÑùʽ»á¸ù¾ÝÏÂÃæµÄ¹æÔò²ãµþÓÚÒ»¸öеÄÐéÄâÑùʽ±íÖУ¬ÆäÖÐÊý×Ö 4 ÓµÓÐ×î¸ßµÄÓÅÏÈȨ¡£
1.
ä¯ÀÀÆ÷ȱʡÉèÖÃ
2.
ÍⲿÑùʽ±í
3.
ÄÚ²¿Ñùʽ±í£¨Î»ÓÚ <head> ±êÇ ......
¹ö¶¯ÌõÑùʽÖ÷ÒªÉæ¼°µ½ÈçÏÂCSSÊôÐÔ:
overflowÊôÐÔ: ¼ìË÷»òÉèÖõ±¶ÔÏóµÄÄÚÈݳ¬¹ýÆäÖ¸¶¨¸ß¶È¼°¿í¶ÈʱÈçºÎÏÔʾÄÚÈÝ
overflow: auto; ÔÚÐèҪʱÄÚÈÝ»á×Ô¶¯Ìí¼Ó¹ö¶¯Ìõ
overflow: scroll; ×ÜÊÇÏÔʾ¹ö¶¯Ìõ
overflow-x: hidden; ½ûÖ¹ºáÏòµÄ¹ö¶¯Ìõ
overflow-y: scroll; ×ÜÊÇÏÔʾ×ÝÏò¹ö¶¯Ìõ
width: 568px; width: 98%; ÉèÖÃÇøÓòµÄ ......