6月
22
22
ãªãœã‹å‰é¢ã«è¡¨ç¤ºã•れãªã„?position:relative,absoluteã¨z-indexã§ã®é‡ãªã‚Šé †ã®é–¢ä¿‚
最å‰é¢ã«å‡ºã¦ãã¦æ¬²ã—ã„è¦ç´ ãŒè£ã«å›žã£ã¦è¡¨ç¤ºã•れã¦ã—ã¾ã†ã€‚
CSSã§positionを使ã£ã¦ä½ç½®ã‚’è¨å®šã—ã¦ã„ã‚‹å ´åˆã«ã¯ã‚ˆãç¾ã‚れるç¾è±¡ã§ã™ã€‚
特ã«InternetExplorerã§ã¯æ°—ã‚’ã¤ã‘ãªã„ã¨ã“ã®ç½ ã«ãƒãƒžã£ã¦ã—ã¾ã„ã¾ã™ã€‚
é‡ãªã‚Šé †ã‚’指定ã™ã‚‹z-index。
ã“ã®z-indexã¨positionã‚’åŒæ™‚ã«ä½¿ã†å ´åˆã«ã¯æ³¨æ„ã—ãªã„ã¨ã„ã‘ã¾ã›ã‚“。
position属性ã§è‰¯ã使ã†ã®ãŒrelativeã¨absolute。
absoluteã¯ãã®ç‰¹æ€§ä¸Šã€ä½¿ã†å ´åˆã«æ°—ã‚’ã¤ã‘る人ãŒå¤šã„ã®ã§ã™ãŒrelativeã ã£ã¦å®Ÿã¯ãªã‹ãªã‹ã‚„ã£ã‹ã„ã§ã™ã€‚
relativeã¯ä¸€è¦‹ä½¿ã„ã‚„ã™ã„ã®ã§é »ç¹ã«ä½¿ã„ãŒã¡ã§ã™ãŒã€
relativeを使ã†ã¨æš—é»™ã®ã†ã¡ã«z-indexãŒæŒ‡å®šã•れるã®ã§ã€
é‡ãªã‚Šé †ã‚’考慮ã™ã‚‹å ´åˆã¯æ°—ã‚’ã¤ã‘ãªã„ã¨ç½ ã«ã¯ã¾ã‚Šã¾ã™ã€‚
é‡ãªã‚Šé †ã®æŒ‡å®šã«ã¤ã„ã¦çŸ¥ã£ã¦ãŠãã“ã¨ã§ã€ã“ã®å•é¡Œã«æ‚©ã¾ãªã„よã†ã«ã—ã¦ãŠãã¾ã—ょã†ã€‚
基本的ã«ï¼’ã¤ã®é‡ãªã‚Šåˆã£ãŸè¦ç´ ãŒã‚ã‚‹å ´åˆã€
é‡ãªã‚Šé †ã¯ã‚³ãƒ¼ãƒ‰ä¸Šå¾Œã«å‡ºã¦ããŸã‚‚ã®ãŒä¸Šã«é‡ãªã£ã¦è¡¨ç¤ºã•れã¾ã™ã€‚
Aã€Bã®é †ã§è¦ç´ ãŒæŒ‡å®šã•れãŸã¨ãã€å¾Œã«æ›¸ã‹ã‚ŒãŸBãŒä¸Šã«è¡¨ç¤ºã•れã¾ã™ã€‚

ã“ã®å ´åˆã€Aã‚’å‰ã«ã—ãŸã‘れã°
Aã®z-indexã‚’10
Bã®z-indexã‚’0
ã¨ã‹ã«ã™ã‚Œã°ã„ã„ã§ã™ã€‚
※値ãŒå¤§ãã„ã»ã†ãŒä¸Šã«ãã‚‹

ã§ã‚‚ã€é€šå¸¸ãƒ›ãƒ¼ãƒ ページã£ã¦è¦ç´ ãŒï¼’ã¤ã—ã‹ãªã„ã£ã¦ã“ã¨ã¯ãªã„ã®ã§
ãŸãã•ã‚“ã®ã‚‚ã®ãŒé‡ãªã‚Šåˆã£ã¦ã¾ã™ã€‚
ãã‚“ãªä¸ã§å˜ç´”ã«é‡ãªã‚Šé †ã‚’変ãˆã‚‹ãŸã‚ã«
åŒã˜ã‚ˆã†ã«
Aã®z-indexã‚’10
Bã®z-indexã‚’0
ã¨ã—ãŸã£ã¦ã†ã¾ã行ã‹ãªã„ã“ã¨ãŒã‚りã¾ã™ã€‚
ã“れã¯ä¸å…·åˆã§ã¯ãªã通常ã®å‹•作。
次ã®ã‚ˆã†ã«ãªã£ã¦ã„ã‚‹ã“ã¨ãŒå¤šã„ã§ã™ã€‚

å˜ç´”ã«Aã¨Bを比較ã™ã‚‹ã¨Aã®æ–¹ãŒz-indexã®å€¤ã¯å¤§ãã„ã§ã™ãŒã€
ãã®ãƒ™ãƒ¼ã‚¹ã¨ãªã£ã¦ã„ã‚‹è¦ç´ (赤ã¨ç·‘)ã®é‡ãªã‚Šé †ãŒã™ã§ã«ç·‘ãŒä¸Šã«æ¥ã¦ã„ã‚‹ã“ã¨ãŒã‚ã‹ã‚Šã¾ã™ã€‚
Aã¨Bã¯é…ç½®ã•れã¦ã„ã‚‹å ´æ‰€ãŒé•ã†ã®ã§z-indexã‚’ã„ã˜ã£ãŸã¨ã“ã‚ã§ãŠäº’ã„ã«ä½•も影響ãŒã‚りã¾ã›ã‚“。
ã“ã®å ´åˆã€Aã¨Bã«z-indexã®æŒ‡å®šã‚’ã™ã‚‹ã®ã§ã¯ãªãã¦ã€ãã®ãƒ™ãƒ¼ã‚¹ã®è¦ç´ ã‚’æ“作ã™ã‚‹å¿…è¦ãŒã‚りã¾ã™ã€‚
赤ã¨ç·‘ã®z-indexを入れ替ãˆã‚‹ã¨ä¸‹ã®ã‚ˆã†ã«ãªã‚Šã€AãŒä¸Šã«æ¥ã¾ã™ã。
ã“ã®éš›Aã¨Bã®z-indexã¯ä¸è¦ãªã®ã§æ¶ˆã—ã¦ã‚‚大丈夫ã§ã™ã€‚

ã‚‚ã—ã€é‡ãªã‚Šé †ã§æ€ã£ãŸã‚ˆã†ãªæŒ™å‹•ã‚’ã—ãªã„ã¨ãã¯ã€
ãã®ãƒ™ãƒ¼ã‚¹ã¨ãªã‚‹è¦ç´ を調ã¹ã¦ã¿ã¾ã—ょã†ã€‚
特ã«position:relativeã¯è‡ªå‹•ã§z-indexãŒè¨å®šã•れã¦ã—ã¾ã†ã®ã§ã€
æ„図ã—ãªã„ã†ã¡ã«é‡ãªã‚Šé †ãŒæŒ‡å®šã•れãŸçŠ¶æ…‹ã«ãªã£ã¦ã—ã¾ã„ã€è¦‹ãˆãªã„é‡ãªã‚Šé †ã«æ‚©ã¾ã•れã¾ã™ã€‚
慣れれã°é›£ã—ã„ã‚‚ã®ã§ã¯ãªã„ã§ã™ãŒã€positionを使ã†éš›ã«ã¯æ°—ã‚’ã¤ã‘ã¾ã—ょã†ã€‚
↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


↓ドメインをã¨ã‚‹ãªã‚‰â†“
ドメインã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰




↓ドメインをã¨ã‚‹ãªã‚‰â†“
ドメインã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“


人気ã®è¨˜äº‹
- ãªãœã‹å‰é¢ã«è¡¨ç¤ºã•れãªã„?position:relative,absoluteã¨z-indexã§ã®é‡ãªã‚Šé †ã®é–¢ä¿‚ - 117,504 views
- 当サイトã«ã¤ã„㦠- 112,290 views
- 自分ã®ãƒ‘ソコンã®ãƒãƒ¼ã‚«ãƒ«ç’°å¢ƒã§ãƒ›ãƒ¼ãƒ ページを作るã€è¦‹ã‚‹ - 83,886 views
- ã“れã¯ä½¿ãˆã‚‹ï¼ãƒžã‚¦ã‚¹ã‚’ç”»åƒã®ä¸Šã«æŒã£ã¦ãã‚‹ã¨æ˜Žã‚‹ããªã‚‹å‡¦ç†ã‚’CSSã ã‘ã§å®Ÿè£…。 - 13,565 views
- SEOã«çµ¶å¯¾ã‚„ã£ã¦ã¯ã„ã‘ãªã„。フレームセットã®ãƒ›ãƒ¼ãƒ ページ。 - 12,059 views
- フリーダイアルã®ãƒã‚´ãƒžãƒ¼ã‚¯ã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ - 11,480 views
- ã“れãŒã‚れã°ã¨ã£ã¦ã‚‚便利。ホームページを作るãŸã‚ã®ã‚½ãƒ•ト。 - 9,404 views
- FFFTPã§.htaccessãŒè¡¨ç¤ºã•れãªã„ã®ã‚’表示ã•ã›ã‚‹æ–¹æ³• - 8,493 views
- 点線を使ã£ãŸä¸‹ç·šã‚’引ã„ã¦ãƒŽãƒ¼ãƒˆã®ã‚ˆã†ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹CSS - 7,898 views
- HTMLãƒ†ãƒ¼ãƒ–ãƒ«ã‚¿ã‚°ã®æ¦‚è¦ãã®ï¼’。ヘッダーã€ãƒœãƒ‡ã‚£ã€ãƒ•ッターã®ï¼“è¦ç´ 。 - 7,707 views