6月
22

ãªãœã‹å‰é¢ã«è¡¨ç¤ºã•れãªã„?position:relative,absoluteã¨z-indexã§ã®é‡ãªã‚Šé †ã®é–¢ä¿‚

By admin  //  CSS, CSS  //  コメントã¯å—ã‘付ã‘ã¦ã„ã¾ã›ã‚“。

é‡ãªã‚Šé †ãŒã†ã¾ã指定ã§ããªã„。
最å‰é¢ã«å‡ºã¦ãã¦æ¬²ã—ã„è¦ç´ ãŒè£ã«å›žã£ã¦è¡¨ç¤ºã•れã¦ã—ã¾ã†ã€‚
CSSã§positionを使ã£ã¦ä½ç½®ã‚’設定ã—ã¦ã„ã‚‹å ´åˆã«ã¯ã‚ˆãç¾ã‚れるç¾è±¡ã§ã™ã€‚
特ã«InternetExplorerã§ã¯æ°—ã‚’ã¤ã‘ãªã„ã¨ã“ã®ç½ ã«ãƒãƒžã£ã¦ã—ã¾ã„ã¾ã™ã€‚
é‡ãªã‚Šé †ã‚’指定ã™ã‚‹z-index。
ã“ã®z-indexã¨positionã‚’åŒæ™‚ã«ä½¿ã†å ´åˆã«ã¯æ³¨æ„ã—ãªã„ã¨ã„ã‘ã¾ã›ã‚“。



position属性ã§è‰¯ã使ã†ã®ãŒrelativeã¨absolute。
absoluteã¯ãã®ç‰¹æ€§ä¸Šã€ä½¿ã†å ´åˆã«æ°—ã‚’ã¤ã‘る人ãŒå¤šã„ã®ã§ã™ãŒrelativeã ã£ã¦å®Ÿã¯ãªã‹ãªã‹ã‚„ã£ã‹ã„ã§ã™ã€‚
relativeã¯ä¸€è¦‹ä½¿ã„ã‚„ã™ã„ã®ã§é »ç¹ã«ä½¿ã„ãŒã¡ã§ã™ãŒã€
relativeを使ã†ã¨æš—é»™ã®ã†ã¡ã«z-indexãŒæŒ‡å®šã•れるã®ã§ã€
é‡ãªã‚Šé †ã‚’考慮ã™ã‚‹å ´åˆã¯æ°—ã‚’ã¤ã‘ãªã„ã¨ç½ ã«ã¯ã¾ã‚Šã¾ã™ã€‚
é‡ãªã‚Šé †ã®æŒ‡å®šã«ã¤ã„ã¦çŸ¥ã£ã¦ãŠãã“ã¨ã§ã€ã“ã®å•é¡Œã«æ‚©ã¾ãªã„よã†ã«ã—ã¦ãŠãã¾ã—ょã†ã€‚

基本的ã«ï¼’ã¤ã®é‡ãªã‚Šåˆã£ãŸè¦ç´ ãŒã‚ã‚‹å ´åˆã€
é‡ãªã‚Šé †ã¯ã‚³ãƒ¼ãƒ‰ä¸Šå¾Œã«å‡ºã¦ããŸã‚‚ã®ãŒä¸Šã«é‡ãªã£ã¦è¡¨ç¤ºã•れã¾ã™ã€‚
Aã€Bã®é †ã§è¦ç´ ãŒæŒ‡å®šã•れãŸã¨ãã€å¾Œã«æ›¸ã‹ã‚ŒãŸBãŒä¸Šã«è¡¨ç¤ºã•れã¾ã™ã€‚

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

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

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

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

Comments are closed.

↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


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

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

人気ã®è¨˜äº‹