{"id":28595,"date":"2026-08-15T11:48:36","date_gmt":"2026-08-15T02:48:36","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=28595"},"modified":"2026-08-15T12:01:10","modified_gmt":"2026-08-15T03:01:10","slug":"z-index","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=28595","title":{"rendered":"z-index"},"content":{"rendered":"\n<p>\u3053\u3093\u306a\u611f\u3058\u306b\u6c7a\u3081\u308b\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u30ec\u30a4\u30e4\u30fc<\/th><th>z-index<\/th><th>\u7528\u9014<\/th><\/tr><\/thead><tbody><tr><td>\u901a\u5e38\u30b3\u30f3\u30c6\u30f3\u30c4<\/td><td>auto \/ 0<\/td><td>\u666e\u901a\u306e\u753b\u9762<\/td><\/tr><tr><td>\u6d6e\u904a\u8981\u7d20<\/td><td>10<\/td><td>sticky\u3001\u56fa\u5b9a\u30d8\u30c3\u30c0\u30fc\u7b49<\/td><\/tr><tr><td>\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3<\/td><td>100<\/td><td>\u30bb\u30ec\u30af\u30c8\u3001\u30e1\u30cb\u30e5\u30fc<\/td><\/tr><tr><td>\u30dd\u30c3\u30d7\u30aa\u30fc\u30d0\u30fc<\/td><td>200<\/td><td>Tooltip\u3001Popover<\/td><\/tr><tr><td>\u30e2\u30fc\u30c0\u30eb<\/td><td>300<\/td><td>Dialog<\/td><\/tr><tr><td>\u30e2\u30fc\u30c0\u30eb\u5185\u306e\u6700\u4e0a\u4f4d<\/td><td>400<\/td><td>Dialog\u306e\u64cd\u4f5c\u7cfb<\/td><\/tr><tr><td>\u901a\u77e5<\/td><td>500<\/td><td>Toast\u7b49<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">CSS\u5909\u6570\u306b\u307e\u3068\u3081\u308b<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n  --z-base: 0;\n  --z-sticky: 10;\n  --z-dropdown: 100;\n  --z-popover: 200;\n  --z-modal: 300;\n  --z-toast: 400;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">staking context<\/h2>\n\n\n\n<p>z-index\u3092\u5916\u90e8\u306b\u5207\u308a\u51fa\u3059\u6a5f\u80fd\u3002\u5177\u4f53\u7684\u306b\u4ee5\u4e0b\u306ecss\u6307\u5b9a\u304c\u3042\u308b\u3068\u5bfe\u8c61\u306b\u306a\u308b\u3002<\/p>\n\n\n\n<ul>\n<li><code>position: relative\/absolute<\/code> \uff0b <code>z-index<\/code> \u304c <code>auto<\/code> \u4ee5\u5916 <\/li>\n\n\n\n<li><code>position: fixed<\/code><\/li>\n\n\n\n<li><code>position: sticky<\/code><\/li>\n\n\n\n<li><code>opacity: 1<\/code> \u672a\u6e80 <\/li>\n\n\n\n<li><code>transform<\/code> \u304c <code>none<\/code> \u4ee5\u5916 <\/li>\n\n\n\n<li><code>filter<\/code> \u304c <code>none<\/code> \u4ee5\u5916 <\/li>\n\n\n\n<li><code>isolation: isolate<\/code>\uff08\u6c4e\u7528\u306e\u30e2\u30fc\u30c0\u30eb\u7cfb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f5c\u308b\u306a\u3089\u304b\u306a\u308a\u76f8\u6027\u826f\u3044\uff09<\/li>\n\n\n\n<li><code>will-change<\/code> \u3067\u4e0a\u8a18\u306e\u5bfe\u8c61\u3092\u6307\u5b9a<\/li>\n\n\n\n<li> <code>mix-blend-mode<\/code> \u304c <code>normal<\/code> \u4ee5\u5916<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"\u3053\u3093\u306a\u611f\u3058\u306b\u6c7a\u3081\u308b\u3002 \u30ec\u30a4\u30e4\u30fc z-index \u7528\u9014 \u901a\u5e38\u30b3\u30f3\u30c6\u30f3\u30c4 auto \/ 0 \u666e\u901a\u306e\u753b\u9762 \u6d6e\u904a\u8981\u7d20 10 sticky\u3001\u56fa\u5b9a\u30d8\u30c3\u30c0\u30fc\u7b49 \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3 100 \u30bb\u30ec\u30af\u30c8\u3001\u30e1\u30cb\u30e5\u30fc \u30dd\u30c3\u30d7\u30aa\u30fc\u30d0\u30fc 200 Too [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/28595"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28595"}],"version-history":[{"count":5,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/28595\/revisions"}],"predecessor-version":[{"id":28602,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/28595\/revisions\/28602"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=28595"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=28595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}