CSS¶¨Î»
¶¨Î»Ò»Ö±ÊÇWEB±ê×¼Ó¦ÓÃÖеÄÄѵ㣬Èç¹ûÀí²»Çå³þ¶¨Î»ÄÇô¿ÉÄÜӦʵÏÖµÄЧ¹ûʵÏÖ²»ÁË£¬ÊµÏÖÁ˵ÄЧ¹û¿ÉÄÜ»á×ßÑù¡£Èç¹ûÀíÇåÁ˶¨Î»µÄÔÀí£¬ÄǶ¨Î»»áÈÃÍøÒ³ÊµÏֵĸü¼ÓÍêÃÀ¡£
¶¨Î»µÄ¶¨Ò壺
ÔÚCSSÖйØÓÚ¶¨Î»µÄÄÚÈÝÊÇ£ºposition:relative | absolute | static | fixed
static ûÓÐÌØ±ðµÄÉ趨£¬×ñÑ»ù±¾µÄ¶¨Î»¹æ¶¨£¬²»ÄÜͨ¹ýz-index½øÐвã´Î·Ö¼¶¡£
relative ²»ÍÑÀëÎĵµÁ÷£¬²Î¿¼×ÔÉí¾²Ì¬Î»ÖÃͨ¹ý top,bottom,left,right ¶¨Î»£¬²¢ÇÒ¿ÉÒÔͨ¹ýz-index½øÐвã´Î·Ö¼¶¡£
absolute ÍÑÀëÎĵµÁ÷£¬Í¨¹ý top,bottom,left,right ¶¨Î»¡£Ñ¡È¡Æä×î½üµÄ¸¸¼¶¶¨Î»ÔªËØ£¬µ±¸¸¼¶ position Ϊ static ʱ£¬absoluteÔªËØ½«ÒÔbody×ø±êÔµã½øÐж¨Î»£¬¿ÉÒÔͨ¹ýz-index½øÐвã´Î·Ö¼¶¡£
fixed ¹Ì¶¨¶¨Î»£¬ÕâÀïËûËù¹Ì¶¨µÄ¶ÔÏñÊÇ¿ÉÊÓ´°¿Ú¶ø²¢·ÇÊÇbody»òÊǸ¸¼¶ÔªËØ¡£¿Éͨ¹ýz-index½øÐвã´Î·Ö¼¶¡£
CSSÖж¨Î»µÄ²ãµþ·Ö¼¶£ºz-index: auto | namber;
auto ×ñ´ÓÆä¸¸¶ÔÏóµÄ¶¨Î»
namber ÎÞµ¥Î»µÄÕûÊýÖµ¡£¿ÉΪ¸ºÊý
¶¨Î»µÄÔÀí£º
¿ÉÒÔÎ»ÒÆµÄÔªËØ £¨Ïà¶Ô¶¨Î»£©
ÔÚ±¾ÎÄÁ÷ÖУ¬ÈκÎÒ»¸öÔªËØ¶¼±»Îı¾Á÷ËùÏÞÖÆÁË×ÔÉíµÄλÖ㬵«ÊÇͨ¹ýCSSÎÒÃÇÒÀȻʹµÃÕâÐ©ÔªËØ¿ÉÒԸıä×Ô¼ºµÄλÖã¬ÎÒÃÇ¿ÉÒÔͨ¹ýfloatÀ´ÈÃÔªËØ¸¡¶¯£¬ÎÒÃÇÒ²¿ÉÒÔͨ¹ýmarginÀ´ÈÃÔªËØ²úÉúλÖÃÒÆ¶¯¡£µ«ÊÇÊÂʵÉÏÄDz¢·ÇÊÇÕæÊµµÄÎ»ÒÆ£¬ÒòΪ£¬ÄÇÖ»ÊÇͨ¹ý¼Ó´ómarginÖµÀ´ÊµÏÖµÄÕÏÑÛ·¨¡£¶øÕæÕýÒâÒåÉϵÄÎ»ÒÆÊÇͨ¹ýtop,right,bottom,left£¨Ï³ÆTRBL£¬TRBL¿ÉÒÔÕÛ·ÖʹÓᣣ©Õë¶ÔÒ»¸öÏà¶Ô¶¨Î»µÄÔªËØËù²úÉúµÄ¡£ÎÒÃÇ¿´ÏÂÃæµÄͼ£º
ÎÒÃÇ¿´Í¼ÖÐÊÇÒ»¸ö¿í¶ÈΪ200px£¬¸ß¶ÈΪ50px£¬margin:25px; border:25px solid #333; padding:25px; Ïà¶Ô¶¨Î»µÄÔªËØ£¬²¢ÇÒÎ»ÒÆ¾àÉÏ50px£¬¾à×ó50px¡£¶øÏ·½ÊÇÒ»¿éĬÈ϶¨Î»µÄºÚÉ«Çø¿é¡£ÎÒÃÇ¿´µ½Õâ¸ö´¦ÔÚÎı¾Á÷µÄÇø¿é±»ÉÏÃæµÄÏà¶Ô¶¨Î»µ²×¡ÁËÒ»²¿·Ö£¬Õâ˵Ã÷£º“µ±ÔªËر»ÉèÖÃÏà¶Ô¶¨Î»»òÊǾø¶Ô¶¨Î»ºó£¬½«×Ô¶¯²úÉú²ãµþ£¬ËûÃǵIJãµþ¼¶±ð×ÔÈ»µÄ¸ßÓÚÎı¾Á÷”¡£³ý·ÇÉèÖÃÆäz-indexֵΪ¸ºÖµ£¬µ«ÊÇÔÚ FirefoxµÈä¯ÀÀÆ÷ÖÐz-indexΪ¸ºÖµÊ±½«²»»áÏÔʾ¡£²¢ÇÒÎÒÃÇ·¢ÏÖµ±Ïà¶Ô¶¨Î»ÔªËؽøÐÐÎ»ÒÆºó£¬±íÏÖÄÚÈÝÒѾÍÑÀëÁËÎı¾Á÷£¬Ö»ÊÇÔÚ±¾ÎÄÁ÷Öл¹ÎªÔÀ´µÄ¾ø¶Ô¶¨Î»ÁôÏÂÁËÔÓеÄ×Ü¿íÓë×ܸߣ¨ÄÚÈݵĸ߶ȻòÊÇ¿í¶È¼ÓÉÏmargin\border\paddingµÄÊýÖµ£©¡£Õâ˵Ã÷ÔÚÏà¶Ô¶¨Î»ÖУ¬ËäÈ»±íÏÖÇøÍÑÀëÁËÔÀ´µÄÎı¾Á÷£¬µ«ÊÇÔÚÎı¾Á÷Öл¹»¹ÓдËÏà¶Ô¶¨Î»µÄÀÏ窩¡£ÕâµãÒªÌØ±ð×¢ÒâÒòΪÔÚʵ¼ÊÓ¦ÓÃÖУ¬Èç¹ûÏà¶Ô¶¨Î»µÄÎ»ÒÆÊýÖµ¹ý´ó£¬ÄÇôÔÓеÄÇøÓò¾Í»áÐγÉÒ»¿é¿Õ°×
Ïà¹ØÎĵµ£º
ÏÈÀ´¿´ÏÂposition¸÷ÊôÐԵĽâÊÍ
absolute
: Éú³É¾ø¶Ô¶¨Î»µÄÔªËØ£¬Ïà¶ÔÓÚ static ¶¨Î»ÒÔÍâµÄµÚÒ»¸ö¸¸ÔªËؽøÐж¨Î»¡£
ÔªËØµÄλÖÃͨ¹ý "left", "top", "right" ÒÔ¼° "bottom&q ......
<html>
<head>
<mce:style type = "text/css"><!--
table
{
border-collapse:collapse;
}
td
{
border:solid 1px black;
}
--></mce:style><style type = "text/css" mce_bogus="1">table
{
border-collapse:collapse;
}
td
......
IEµÄÎÊÌ⣺
Ò».Ë«±ß¾àÎÊÌâ
¸¡¶¯ÔªËصÄÍâ±ß¾à»á¼Ó±¶£¬µ«ÓëµÚÒ»¸ö¸¡¶¯ÔªËØÏàÁ򵀮äËû¸¡¶¯ÔªËØÍâ±ß¾à²»»á¼Ó±¶¡£
½â¾ö·½·¨£ºÔڴ˸¡¶¯ÔªËØÔö¼ÓÑùʽ display:inline;
¶þ.ͼƬ²úÉúµÄ¼ä϶
¸¸ÔªËØÖ±½Ó°üº¬<img>£¬Õâ¸öͼƬÏ·½»áºÍ¸¸ÔªËرßÔµ²úÉú¼ä϶¡£
½â¾ø·½·¨£º1.ÔÚÔ´´úÂëÖÐÈÃ</div>ºÍ<img>ÔÚÍ ......
CSS·ÖÀ¸²¼¾ÖµÄ·½·¨:¾ø¶Ô¶¨Î»ºÍ¸¡¶¯
³ö´¦£ºÍøÒ³½ÌÑ§Íø
×÷ÕߣºØýÃû
ÈÕÆÚ£º2009-03-09
¡¡
¡¡ÔÚCSSÖУ¬ÊµÏÖ·ÖÀ¸²¼¾ÖÓÐÁ½ÖÖ·½·¨¡£µÚÒ»ÖÖ·½·¨ÊÇʹÓÃËÄÖÖCSS¶¨Î»Ñ¡Ïabsolute
¡¢static¡¢relativeºÍfixed£©Öеľø¶Ô¶¨Î»£¨absolute
positioning£©£¬Ëü¿ÉÒÔ½«ÎĵµÖеÄij¸öÔªËØ´ÓÆäÔ±¾Î»ÖÃÉÏÒÆ³ý£¬²¢ÖØÐ¶¨Î» ......
CSS£¬²ãµþÑùʽ±íµÄ×÷ÓÃÊÇʲô£¿ÎÒÃÇÏÈͨ¹ýÒ»¸öÀý×ÓÀ´Ìå»áһϣº
¿´´úÂ룺
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=" ......