ªð¦^¦Cªí ¤W¤@¥DÃD µo©«

[±Ð¾Ç] (±Ð¾Ç²Ä35½g) °ïÅ| ¤W½g

[±Ð¾Ç] (±Ð¾Ç²Ä35½g) °ïÅ| ¤W½g

»{ÃÑ°ïÅ|
CSS°£¤F¥i¥H¥Î¨Ó³]©wºô­¶¤å¦rªº¤j¤p¡B¼Ë¦¡¡B¦r«¬»PÃC¦â¥~¡A§Ú­ÌÁÙ¥i¥H§Q¥ÎCSS¥H¹Ï¯À(¹³¯À)¬°³æ¦ì¨Ó±N¤å¦r¦r¦ê¦w±Æ¦b¦h¼h¦¸ªºª©­±¤W¡A³o´N¬O©Ò¿×ªº°ïÅ|¡A¤ñ¸û²z½×½ÆÂøªº»¡ªk´N¬O©Ò¿×ªº¡uz-index¡v¡A¥H3D¥ßÅé¨Ó»¡¡G§Ú­Ì¥i¥H±N¤å¦r¥­­±(©Î¬O¹Ï¤ù¥­­±)·í¦¨¤ô¥­X¶b»P««ª½Y¶b©Òºc¦¨ªº¥­­±¡A¦Ó'z-index'´N¬O«üZ¶b¤Wªº®y¼Ð¦ì¸m¡C

·í§Ú­Ì­n­q©w¤@­Óºô­¶¤¤ªº¤å¦r¤º®e©Î¹Ï¤ùµ´¹ï¦ì¸m®É¡A§Ú­Ì¥²¶·¿í¦uCSS©Ò©w¦ì¸m¼Ð·Ç¡G¡¦top¡¦»P¡¦left¡¦(¥H¹Ï¯À(¹³¯À,px)¬°³æ¦ì)¡AÁ|¨Ò¨Ó»¡¡G§Ú­Ì­n±N¬Y¤@¤å¦r¦r¦ê©ñ¦bÂsÄý¾¹µøµ¡±q¥ªÃä½tºâ¨Ó²Ä60­Ó¹³¯Àªº¦ì¸m¡A±q¤WÃä½tºâ¨Ó²Ä100­Ó¹³¯Àªº¦ì¸m¡A«h§Ú­ÌÀ³¸Ó«ü©w¡¦top¡¦¬°100»P¡¦left¡¦¬°60¡C



¬Ý¨ì¤F¤W¹Ï©Ò§e²{ªº¤å¦r¦r¦ê°ïÅ|®ÄªGı±o«Ü´Î§a¡I³o­Ó®ÄªG¬O¦p¦ó°µ¥X¨Óªº©O¡H½Æ²ß¤@¤U«e­±³¹¸`ªº¤¶²Ð¡A¦P®É±N¥»¸`ªº·sCSS©Ê½èÄÝ©Ê¥[¤J§Q¥Î¡A§Ú­ÌStep By Stype ªº¨Ó¹ê°µ¤@¤U¡G


  • ©w¸q²Ä¤@­Ó¼h¦¸©Ò­nªí²{ªº¤å¦r¼Ë¦¡ layer1¡G
    ³o¤@­Ó¼h¦¸ªº¶}©l¦ì¸m¬O¦bÂsÄý¾¹µøµ¡±q¥ªÃä½tºâ¨Ó²Ä30­Ó¹³¯Àªº¦ì¸m¡A±q¤WÃä½tºâ¨Ó²Ä30­Ó¹³¯Àªº¦ì¸m¡A¯S§O­nª`·Nªº¬O¡G³o­Ó¼h¦¸ªº¡¦z-index¡¦ÄݩʭȬ°¢°¡C
    1. .layer1
    2. {
    3. position:absolute;
    4. top:20px;
    5. left:30px;
    6. z-index:1;
    7. font-size:24pt;
    8. font-family:¼Ð·¢Åé;
    9. color:#FFFFFF
    10. }
    ½Æ»s¥N½X
  • ©w¸q²Ä¤G­Ó¼h¦¸©Ò­nªí²{ªº¤å¦r¼Ë¦¡ layer2¡G
    ³o²Ä¤G­Ó¼h¦¸ªº¶}©l¦ì¸m¬O¦bÂsÄý¾¹µøµ¡±q¤WÃä½tºâ¨Ó²Ä40­Ó¹³¯Àªº¦ì¸m¡A±q¥ªÃä½tºâ¨Ó²Ä120­Ó¹³¯Àªº¦ì¸m¡A¯S§O­nª`·Nªº¬O¡G³o­Ó¼h¦¸ªº¡¦z-index¡¦ÄݩʭȬ°¢±¡C
    1. .layer2
    2. {
    3. position:absolute;
    4. top:40px;
    5. left:120px;
    6. z-index:2;
    7. font-size:12pt;
    8. font-family:¼Ð·¢Åé
    9. }
    ½Æ»s¥N½X
  • ¦bºô­¶¼ÐÅÒ<P>¤¤ª½±µ¥[¤J§Ú­Ì©Ò«Å§iªºCSSÄÝ©ÊÃþ§O³]©w¡C
    1. <P class="layer1">²Ä¤@¼hªº¤å¦r¦r¦ê</P>
    2. <P class="layer2">²Ä¤G¼hªº¤å¦r¦r¦ê</P>
    ½Æ»s¥N½X


»´»´ÃPÃP§¹¦¨§Ú­Ì²Ä¤@­Ó§Q¥Î°ïÅ|ÄÝ©Ê©Ò»s§@ªº¤å¦rÅ|¼h®ÄªG¡C

14-2.png
  1. <html>
  2. <HEAD>
  3. <title>°ïÅ|®ÄªG½d¨Ò¢°</title>
  4. <STYLE>
  5. BODY {background:#008800}
  6. .layer1
  7. {
  8.         position:absolute;
  9.         top:20px;
  10.         left:30px;
  11.         z-index:1;
  12.         font-size:24pt;
  13.         font-family:¼Ð·¢Åé;
  14.         color:#FFFFFF
  15. }
  16. .layer2
  17. {
  18.         position:absolute;
  19.         top:40px;
  20.         left:120px;
  21.         z-index:2;
  22.         font-size:12pt;
  23.         font-family:¼Ð·¢Åé
  24. }

  25. </STYLE>
  26. </HEAD>
  27. <BODY>
  28. <P class="layer1">²Ä¤@¼hªº¤å¦r¦r¦ê</P>
  29. <P class="layer2">²Ä¤G¼hªº¤å¦r¦r¦ê</P>
  30. </BODY>
  31. </html>
½Æ»s¥N½X
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

¤£¶È¬O¤å¦r¦r¦ê¥i¥H°µ¼h¦¸ªº°ïÅ|¡A¨ä¹ê¹Ï¤ù¤]¥i¥H°µ¤£¦P¼h¦¸ªº°ïÅ|¡I

  1. <html>
  2. <HEAD>
  3. <title>°ïÅ|®ÄªG½d¨Ò¢±</title>
  4. <STYLE>
  5. .map1
  6. {
  7.         position:absolute;
  8.         top:20px;
  9.         left:30px;
  10.         z-index:1;
  11. }
  12. .map2
  13. {
  14.         position:absolute;
  15.         top:50px;
  16.         left:100px;
  17.         z-index:2;
  18. }
  19. </STYLE>
  20. </HEAD>
  21. <BODY>
  22. <img src="webusedmap1.gif" class="map1">
  23. <img src="webusedmap2.gif" class="map2">
  24. </BODY>
  25. </html>
½Æ»s¥N½X
¬Ý¹L¤F¡u¤å¦r°ïÅ|¡v»P¡u¹Ï¤ù°ïÅ|¡vªº½d¨Ò«á¡A§A¬O¤£¬Oµo²{¦³¤@­ÓÄÝ©Ê«Ü­«­n¡H´N¬O¨º­Ó¡yz-index¡zÄÝ©Ê£«¡A¡yz-index¡zÄݩʱN¨M©w¨º¤@­Ó°ïÅ|¤¸¥ó¸Ó¦b¤W¤è¡A¦Ó¨º¤@­Ó°ïÅ|¤¸¥ó¤S¸Ó¦b¤U¤è¡Aª`·N³á¡Iz-indexÄݩʭȶV¤jªº°ïÅ|±Æ¦Cªº¶¶§Ç·|¦b¶V¤W¼h¡I
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

        ÀR«ä¦Û¦b : ¤H¨ÆªºÁ}Ãø»PµZ¿i¡A´N¬O¤@ºØ¦ÒÅç¡C
ªð¦^¦Cªí ¤W¤@¥DÃD