CSS²ãµþ¼ÓµÄÔÔò
¾²Ì¬¶¨Î»£ºposition:static£¨ÎªpositionÊôÐÔµÄĬÈÏÖµ£©¡£
¶¯Ì¬¶¨Î»£ºposition:relative»òposition:absolute»òposition:fixed¡£
×æÔªËØ£ºÈÎÒâ°üº¬¸ÃÔªËØµÄÔªËØ¡£ ¸¸ÔªËØ£ºÖ±½Ó°üº¬¸ÃÔªËØµÄ×æÔªËØ¡£ ͬ±²ÔªËØ£ºÓµÓй²Í¬µÄ¸¸ÔªËصÄÔªËØ¡£
×¢£ºÕâЩ¸Å
ÄîΪ×÷Õß×Ô¶¨Ò壬½öÓÃÓÚ±¾ÎÄ¡£
ÒýÓÃ:
¹ØÓÚͬ±²ÔªËØÊǸö·Ç³£¹Ø¼üµÄ´Ê£¬ÕâÀﻹÐèÒªÏêϸ½âÊÍ
һϡ£
<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div
id="f">
<div></div>
<div
id="b"></div>
<div id="c"></div>
<div></div>
<div></div>
<div></div>
</div>
ÔÚÕâ¸öÀý×ÓÖУ¬div#aÓë
div#b²¢²»ÊǓͬ±²ÔªËØ”£¬Ö»ÓÐÏñdiv#bºÍdiv#cÕâÑùÓµÓÐͬÑù¸¸Ìådiv#fµÄµÄÔªËØ²ÅÄܽГͬ±²ÔªËØ”¡£
ÒýÓýáÊø
½Ó
ÏÂÀ´¿´¿´ÕâÎåÌõ·¨Ôò
£º
·¨ÔòÒ»
£ºÍ¬±²ÔªËض¨Î»·½Ê½Ïàͬ£¬ÇÒÎÞz-indexÉèÖÃ
ʱ£¬html¿¿ºóÕß¾ÓÉÏ¡£
·¨
Ôò¶þ
£ºÍ¬±²ÔªËØÍ¬Îª¶¯Ì¬¶¨Î»Ê±£¬ÇÒÓÐz-indexÉèÖÃʱ£¬z-indexÖµ´óÕß¾ÓÉÏ¡£
Ã͵ãÕâÀï²âÊÔ
·¨ÔòÈý
£ºÍ¬±²ÔªËض¨Î»·½Ê½²»Í¬Ê±£¬¶¯Ì¬¶¨Î»¾ÓÉÏ¡£
Ã͵ãÕâÀï²âÊÔ
·¨ÔòËÄ
£º·Çͬ±²ÔªËØ£¬ÈÎÒâÒ»Õß¼°Æä×æÔªËØ²»¾ß±¸¶¯Ì¬²¼¾Öʱ£¬html¿¿ºóÕß¾ÓÉÏ¡£
Ã͵ãÕâÀï²âÊÔ
·¨
ÔòÎå
£º¡¾ÖØÒª¡¿·Çͬ±²ÔªËØ£¬ÈÎÒâÒ»Õß»òÆä×æÔªËØÓµÓж¯Ì¬¶¨Î»Ê±£¬Í¬Ê±¸÷×ÔÏòÉÏѰÕÒ¶¯Ì¬¶¨Î»µÄ×æÔªËØ£¬²¢·Ö±ð´ÓÖÐÄóö¾ß±¸×î¸ß¼¶±ðµÄ×æÔª
ËØ£¨»òÆä±¾Éí£©½øÐбȽϡ£
<div id="ab" style=
Ïà¹ØÎĵµ£º
×î½ü×÷¹æ·¶,µÃµ½¹«Ë¾¸ßÊֵĴͽ̣¬ÔÚÖÆ×÷¾²Ì¬Ò³ÃæÖУ¬¾³£Óöµ½¼¸¸ödivµÄ¸¡¶¯ÎÊÌ⣬ÒòΪIE²»Í¬°æ±¾´¦Àí¸¡¶¯»áÏÖÁ½±¶²î¾àµÄÎÊÌ⣨IE6£¬IE7£©£¬ÒÔǰ¶¼ÊÇͨ¹ýhack¼¼Êõ´¦Àí£¬£¨Èç margin-left:10px,[*margin-left:5px;],_margin-left:5px;ÕâÊÇIEµÄÎÊÌ⣩£¬ÏÖÔÚÓÐÒ»¸ö·½·¨£ºÔÚµÚÒ»¸ödivµÄclass¼ÓÉÏ£¨disp ......
Ò»×éǶÌ×Ñ¡ÔñÆ÷µÄʵ¼ÊÌØÐÔ¿ÉÒÔ¼ÆËã³öÀ´¡£»ù±¾µÄ£¬Ê¹ÓÃIDÑ¡ÔñÆ÷µÄÖµÊÇ100£¬Ê¹ÓÃclassÑ¡ÔñÆ÷µÄÖµÊÇ10£¬Ã¿¸öhtmlÑ¡ÔñÆ÷µÄÖµÊÇ1¡£
ËüÃÇ¼ÓÆðÀ´¾Í¿ÉÒÔ¼ÆËã³öÌØÐÔµÄÖµ¡£
pµÄÌØÐÔÊÇ1£¨Ò»¸öhtmlÑ¡ÔñÆ÷£©
div pµÄÌØÐÔÊÇ2£¨Á½¸öhtmlÑ¡ÔñÆ÷£©
.treeµÄÌØÐÔÊÇ10£¨1¸öclassÑ¡ÔñÆ÷£©
div p.treeµÄÌØÐÔÊÇ1+1+10=12£¬£¨Á½¸öhtmlÑ¡ÔñÆ÷ ......
ת×Ô£ºhttp://www.linji.cn/post/1595/
ÓÃCSSÈÃÔªËØ¾ÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇ闗ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬µÄä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÔÚÕâÀÎÒ½éÉÜÒ»ÖֺܺõľÓÖд¦Àí°ì·¨£¬µ«Õâ֮ǰ£¬ÈÃÎÒÃÇÏÈÀ´¿´¿´×î³£¼ûµÄʹÓÃCSS¾ÓÖÐÔªËØµÄ·½·¨¡£
ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
CSS
ÖÐÊ×Ñ¡µÄÈÃÔªËØË®Æ½¾ÓÖеķ ......
:hoverÊÇÎÒÃÇÔÚCSSÉè¼ÆÖÐ×î³£ÔËÓõÄαÀàÖ®Ò»£¬Ðí¶àѤÀöЧ¹ûµÄʵÏÖÀë²»¿ªÎ±Àà:hover£¬±ÈÈçÎÒÃdz£¼ûµÄ´¿CSS²Ëµ¥¡¢Ïà²áЧ¹ûµÈµÈ¡£
»òÐíÓÃÁËÕâô¾ÃµÄαÀà:hover£¬»¹Óв¿·ÖÅóÓÑ»¹²»ÍêÈ«Á˽âhoverµÄ¹æÔò£º
ÔÚCSS1ÖдËαÀà½ö¿ÉÓÃÓÚa¶ÔÏó¡£ÇÒ¶ÔÓÚÎÞhrefÊôÐÔ£¨ÌØÐÔ£©µÄa¶ÔÏ󣬴ËαÀ಻·¢Éú×÷Óá£
ÔÚCSS2ÖдËαÀà¿ÉÒÔÓ¦ÓÃÓÚÈκζÔÏ ......
ÔÚ½øÐÐdiv+cssÍøÒ³²¼¾ÖµÄʱºò£¬²»¿É±ÜÃâµÄÐèÒª²åÈëÒ»¶¨µÄ±íµ¥ÔªËØ£¬inputÊÇÆäÖÐ×î³£¼ûµÄÒ»ÖÖ¡£ÎÒÃÇÔÚ²¼¾ÖÖУ¬³£»áÓöµ½Îı¾ÊäÈë¿òÓëͬ´¦Ò»ÐеÄÎı¾²»¶ÔÆëµÄÎÊÌâ¡£Õâ¸öÎÊÌâÉèÖÃinputµÄvertical-align:middleÊôÐÔÀ´½â¾ö¡£
ÎÒÃÇÀ´¿´ÏÂÃæµÄÀý×Ó£¬ÈçºÎ½â¾öÎı¾ÊäÈë¿òÓëÎı¾¶ÔÆëµÄÎÊÌ⣡
<!DOCTYPE html PUBLIC "-//W3C//DTD ......