Ë¿Ä£¤Î¹ß±«ÃϿޤΥ¿¥¤¥ë¤ò¹ÈÏ°Ïɽ¤Ç¤¤ë¤è¤¦
overflow: hidden; »ØÄꤷ¤¿ div#container ¤Ç°Ï¤Ã¤¿ div#map ¤ò drag ¤Ç¥¹¥¯¥í¡¼¥ë¤µ¤»¤è¤¦¤È¤·¤Æ¤ß¤¿¤ó¤À¤±¤É¡¢overflow: hidden; ¤«¤é¤Ï¤ß½Ð¤¿Éôʬ¤¬±£¤ì¤Æ¤¯¤ì¤Ê¤¤¡£
<style> #container { width: 256px; height: 256px; overflow: hidden; border: 1px solid black; } #map { position: absolute; left: 64px; top: 64px; width: 512px; height: 512px; font-size: 0; } .tile { display: inline-block; position: relative; width: 256px; height: 256px; } .tile img { position: absolute; left: 0px; top: 0px; } </style> <div id="container"> <div id="map"> <div class="tile"><img src="layer1/0_0.png"><img src="layer2/0_0.png"><img src="layer3/0_0.png"></div> <div class="tile"><img src="layer1/1_0.png"><img src="layer2/1_0.png"><img src="layer3/1_0.png"></div><br> <div class="tile"><img src="layer1/0_1.png"><img src="layer2/0_1.png"><img src="layer3/0_1.png"></div> <div class="tile"><img src="layer1/1_1.png"><img src="layer2/1_1.png"><img src="layer3/1_1.png"></div><br> </div> </div>¤ß¤¿¤¤¤Ê´¶¤¸¤Ë¤·¤Æ¼«Á°¤Çʤ١¢
overflow: hidden; »ØÄꤷ¤¿ div#container ¤Ç°Ï¤Ã¤¿ div#map ¤ò drag ¤Ç¥¹¥¯¥í¡¼¥ë¤µ¤»¤è¤¦¤È¤·¤Æ¤ß¤¿¤ó¤À¤±¤É¡¢overflow: hidden; ¤«¤é¤Ï¤ß½Ð¤¿Éôʬ¤¬±£¤ì¤Æ¤¯¤ì¤Ê¤¤¡£
¡Öoverflow hidden ±£¤ì¤Ê¤¤¡×¤Ç¥°¥°¤Ã¤¿¤È¤³¤í¡¢°Ê²¼¤Î¥Ú¡¼¥¸¤¬¸«¤Ä¤«¤Ã¤¿¡£
Û©¤¯¡¢overflow: hidden; ¤ÎÆâÍÆʪ¤¬ position: absolute; ¤À¤È hidden ÉÕ¤±¤¿Í×ÁǤè¤ê¤â¾å°Ì¤ÎÍ×ÁÇ¤Ë absolute ¤ÇŽ¤êÉÕ¤¤¤Æ¤·¤Þ¤¦¤¿¤á¤³¤¦¤Ê¤ë¤ó¤À¤½¤¦¤Ç¡¢hidden ÉÕ¤±¤¿Í×ÁǤò relative ¤Ë¤¹¤ë¤³¤È¤Ç¡¢ÆâÍÆʪ¤ò hidden ¤ÎÍ×ÁǤˤ֤鲼¤²¤í¤È¤Î»ö¡£
¸À¤ï¤ì¤ë¤¬¤Þ¤Þ
- Ika Lab. / 2015-05-08: position¤Èoverflow hidden¤òÊ»ÍѤ¹¤ëºÝ¤ÎÃí°ÕÅÀ
Û©¤¯¡¢overflow: hidden; ¤ÎÆâÍÆʪ¤¬ position: absolute; ¤À¤È hidden ÉÕ¤±¤¿Í×ÁǤè¤ê¤â¾å°Ì¤ÎÍ×ÁÇ¤Ë absolute ¤ÇŽ¤êÉÕ¤¤¤Æ¤·¤Þ¤¦¤¿¤á¤³¤¦¤Ê¤ë¤ó¤À¤½¤¦¤Ç¡¢hidden ÉÕ¤±¤¿Í×ÁǤò relative ¤Ë¤¹¤ë¤³¤È¤Ç¡¢ÆâÍÆʪ¤ò hidden ¤ÎÍ×ÁǤˤ֤鲼¤²¤í¤È¤Î»ö¡£
¸À¤ï¤ì¤ë¤¬¤Þ¤Þ
#container { width: 256px; height: 256px; overflow: hidden; border: 1px solid black; }¢
#container { position: relative; width: 256px; height: 256px; overflow: hidden; border: 1px solid black; }¤È¤·¤Æ¤ß¤¿¤È¤³¤í¡¢Ìµ»ö hidden ¤«¤é¤Ï¤ß½Ð¤¿Éôʬ¤¬±£¤ì¤Æ¾Ã¤¨¤Æ¤¯¤ì¤¿¡£
- ¥«¥Æ¥´¥ê¡§
- ¥Ñ¥½¥³¥ó
- ¥×¥í¥°¥é¥ß¥ó¥°
¥¿¥°
¥³¥á¥ó¥È¤ò¤«¤¯