CSSä¸å±å åCSSç7é¶å±å æ°´å¹³
CSSä¸å±å åCSSç7é¶å±å æ°´å¹³
ä»å¤©æç´¢èµææ¶ï¼å¿½ç¶åç°äºä»¥å没注æçä¸ä¸ªç¥è¯ç¹ï¼æ以æè¿æ¥æä¸æï¼è¿ä¸ªç¥è¯ç¹å«åCSSç7é¶å±å æ°´å¹³
å¨è¯´è¿ä¸ªç¥è¯ä¹åï¼æä»¬å¿ é¡»è¦å äºè§£ä¸ä¸ªä¸è¥¿ä»¥ä¾¿äºæ们æ´å¥½çç解CSSç7é¶å±å æ°´å¹³
è¿ä¸ªä¸è¥¿å°±æ¯z-indexå±æ§ï¼æ¤ç¯ä¸ºä¸ç¯ï¼ä» ä» è®²z-indexï¼
åºæ¬å«ä¹ï¼
z-indexéä¿æ¥è¯´å°±æ¯å¨Zè½´ä¸çç´¢å¼ï¼Zè½´æ¯åç´äºçµèå±å¹çä¸æ ¹è½´
ç¨æ¥è®¾ç½®å ç´ çå å 顺åºãæ¥ææ´é«å å 顺åºçå ç´ æ»æ¯ä¼å¤äºå å 顺åºè¾ä½çå ç´ çåé¢ï¼å³é常æ åµä¸ï¼z-index为2çå ç´ ä¼å¨z-index为1çå ç´ ä¸é¢
åå¼æ åµï¼
z-indexæä¸ä¸ªåå¼
autoï¼é»è®¤ãå å 顺åºä¸ç¶å ç´ ç¸çã
ããnumberï¼è®¾ç½®å ç´ çå å 顺åºã
inheritï¼è§å®åºè¯¥ä»ç¶å ç´ ç»§æ¿ z-index å±æ§çå¼ã
ç¹æ§ï¼
1.æ¯æè´å¼ï¼å¦æ为æ£æ°ï¼å离ç¨æ·æ´è¿ï¼ä¸ºè´æ°å表示离ç¨æ·æ´è¿ãï¼
2.æ¯æCSS3 animationå¨ç»ï¼ï¼å¹¶æ²¡ä»ä¹å®ç¨åºç¨åºæ¯ï¼
3.å¨CSS2.1æ¶ä»£ï¼éè¦åå®ä½å ç´ é å使ç¨ï¼å¦æä¸èèCSS3ï¼åªæå®ä½å ç´ ï¼position:relative/absolute/fixed/stickyï¼çz-indexææä½ç¨ï¼å¨CSS3ä¸æä¾å¤
ååï¼
ãã1.åæ¥è å± ä¸åå
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .a{ position: absolute; height: 400px; width: 400px; background-color: yellowï¼ } .b{ position: absolute; height:400px; width: 400px; background: red; margin-left: 100px; } </style> </head> <body> <div class="a"></div> <div class="b"></div> </body> </html>
è¿è¡ç»æï¼
解æï¼æ们å¯ä»¥çå°ï¼çº¢è²ä½ä¸ºåæ¥çå ç´ è¦çå¨ä¹åçå ç´ ä¸äºï¼å¨æªè®¾ç½®z-indexçåæä¸ï¼åæ¥å ç´ ä¼è¦çåé¢æ·»å å°å ç´ ï¼å½ç¶å®å¨å¼å¯äºç»å¯¹å®ä½çåæä¸ï¼ä¸å¼å¯ç»å¯¹å®ä½ä¸è½ç´è§ççå°ææï¼
ãã
ãã2.è°å¤§è°å
ä¸åå
ããããå¨.aæ·»å z-index:2,å¨.bæ·»å z-index:1
è¿è¡ç»æï¼
ãããã
ãã解æï¼é常æ åµä¸ï¼z-indexè¶å¤§ï¼å±çº§è¶é«ï¼è¶å¨ä¸é¢
ããå½åçåµå¥æ¶ï¼ç¥å ä¼å åå
ãã
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .a{ position: absolute; height: 400px; width: 400px; background-color: yellow; z-index: 2; } .b{ position: absolute; height:400px; width: 400px; background: red; margin-left: 100px; z-index: 1 } .a1{ position: absolute; height: 200px; width: 200px; background-color: aqua; } .b1{ position: absolute; height: 200px; width: 200px; background-color: blue; z-index: 100 } </style> </head> <body> <div class="a"> <div class="a1"></div> </div> <div class="b"> <div class="b1"></div> </div> </body> </html>
è¿è¡ç»æï¼
解æï¼æç §åé¢æ说åºè¯¥æ¯èè²çæ ¼åä¼å¨æä¸é¢ï¼è¿é并没æï¼åå å°±æ¯ç¥å ä¼å åå
açå±çº§å¤§äºbçå±çº§ï¼æ以aéé¢çå ç´ ä¼å§ç»å¨bçä¸é¢ï¼å³ä½¿bçåå ç´ çz-index为10000ä¹æ²¡ç¨
注æï¼
ææ主æµæµè§å¨é½æ¯æ z-index å±æ§
ä»»ä½ççæ¬ç Internet Explorer ï¼å æ¬ IE8ï¼é½ä¸æ¯æå±æ§å¼ "inherit"ã