{"id":747,"date":"2022-03-31T22:27:05","date_gmt":"2022-03-31T13:27:05","guid":{"rendered":"http:\/\/160.251.208.217\/?p=747"},"modified":"2022-11-19T19:25:57","modified_gmt":"2022-11-19T10:25:57","slug":"js-zindex","status":"publish","type":"post","link":"https:\/\/it-dxblog.com\/blog\/js-zindex\/","title":{"rendered":"\u3010JavaScript\u3011\u30af\u30ea\u30c3\u30af\u3057\u305f\u8981\u7d20\u3092\u6700\u524d\u9762\u306b\u8868\u793a\u3059\u308b\uff08z-index\uff09"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Web\u30b7\u30b9\u30c6\u30e0\u306e\u958b\u767a\u3067\u3001<strong>\u30af\u30ea\u30c3\u30af\u3057\u305f\u56f3\u5f62\u3092\u6700\u524d\u9762\u306b\u8868\u793a<\/strong>\u3068\u3044\u3046\u30bf\u30b9\u30af\u304c\u3042\u3063\u305f\u306e\u3067\u3001<strong>CSS\u306ez-index<\/strong>\u3092<strong>JavaScript\u3067\u8a2d\u5b9a<\/strong>\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002\u5b9f\u969b\u306b\u30b7\u30b9\u30c6\u30e0\u306b\u7d44\u307f\u8fbc\u3080\u524d\u306b<strong><span class=\"keiko_blue\">\u6b21\u306e\u52d5\u753b<\/span><\/strong>\u306e\u69d8\u306aHTML\u3092\u4f5c\u6210\u3057\u305f\u306e\u3067\u3001\u307e\u3068\u3081\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-box sng-box box24\"><div id=\"sgb-list-id-1\">\n<div class=\"wp-block-sgb-list\"><div class=\"li-chevron\"><ul style=\"color:#333\"><li>\u30af\u30ea\u30c3\u30af\u3057\u305f\u56f3\u5f62\u3092\u6700\u524d\u9762\u306b\u8868\u793a<\/li><li>\u300cZ=\u6570\u5b57\u300d\u306fz-index\u3092\u8868\u793a\u3000\u203b\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u56f3\u5f62\u306f\u8868\u793a\u304c\u66f4\u65b0\u3055\u308c\u307e\u3059<\/li><li>\uff13\u3064\u306e\u56f3\u5f62\u3068\u3082\u306ez-index\u306e\u521d\u671f\u5024\u306f0<\/li><li>\u30c8\u30fc\u30bf\u30eb\u306e\u30af\u30ea\u30c3\u30af\u56de\u6570\u3092z-index\u306b\u8a2d\u5b9a<\/li><\/ul><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-sgb-box sng-box box2\">\n<figure class=\"wp-block-video\"><video height=\"166\" style=\"aspect-ratio: 318 \/ 166;\" width=\"318\" controls muted src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/03\/zindex.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-0\"><span class=\"sgb-heading__inner sgb-heading--type3\" style=\"background-color:#fff9e5;border-color:#90d581;font-size:1.2em\"><span class=\"sgb-heading__text\" style=\"color:#333\">CSS\u306ezindex<\/span><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>zindex<\/strong>\u306f\u8981\u7d20\u306e<strong>\u91cd\u306a\u308a\u3092\u6570\u5b57\u3067\u6307\u5b9a<\/strong>\u3057\u307e\u3059\u3002<br>\u8981\u7d20\u304c\u91cd\u306a\u308b\u3053\u3068\u304c\u3042\u308b\u3068\u304d\u306b\u3001\u3088\u304f\u4f7f\u3044\u307e\u3059\u3002<br>\u66f8\u304d\u65b9\u306f\u6b21\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>CSS<\/span><pre><code>\u8981\u7d20{\n   z-index:\u6570\u5b57;\n}\n<\/code><\/pre><\/div>\n\n\n<div id=\"sgb-list-id-2\">\n<div class=\"wp-block-sgb-list\"><div class=\"li-check\"><ul style=\"background-color:#FFF;border-color:#FFF;color:#333\"><li>\u6570\u5b57\u306f<strong>\u6574\u6570\u3067\u6307\u5b9a<\/strong>\uff08<strong><span class=\"keiko_red\">\u5c11\u6570\u306fNG<\/span><\/strong>\uff09<\/li><li>\u8a2d\u5b9a\u3067\u304d\u308b\u6570\u5b57\u306e\u7bc4\u56f2\u306f\u3001-2147483647\uff5e2147483647<\/li><li><strong>\u6570\u5b57\u304c\u5927\u304d\u3044\u8981\u7d20\u304c\u4e0a\u306b\u8868\u793a<\/strong>\u3055\u308c\u308b<\/li><\/ul><\/div><\/div>\n<\/div>\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:#f88080;color:#FFF\" class=\"sgb-box-simple__title\">\u6ce8\u610f\uff01\uff01\uff01<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:#f88080;background-color:#ffebeb\">\n<p class=\"wp-block-paragraph\">z-index\u306f<strong>position: static<\/strong>\u306e\u8981\u7d20\u306b\u306f<strong>\u4f7f\u3048\u307e\u305b\u3093<\/strong>\uff08position: static\u306e\u8981\u7d20\u306b\u6307\u5b9a\u3057\u3066\u3082<strong>z-index\u304c\u52b9\u304b\u306a\u3044<\/strong>\uff09<br>\u4f7f\u7528\u3059\u308b\u969b\u306f\u3001position\u306b<strong>relative<\/strong>\u3001<strong>absolute<\/strong>\u3001<strong>fixed<\/strong>\u306e\u3044\u305a\u308c\u304b\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-1\"><span class=\"sgb-heading__inner sgb-heading--type3\" style=\"background-color:#fff9e5;border-color:#90d581;font-size:1.2em\"><span class=\"sgb-heading__text\" style=\"color:#333\">JavaScript\u3067z-index\u3092\u8a2d\u5b9a<\/span><\/span><\/h2>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>JavaScript<\/span><pre><code>\u8981\u7d20.style.zIndex = \u6570\u5b57;\n<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">z-index\u3067\u306f\u306a\u304f\u3001<strong>zIndex<\/strong>\uff08<strong><span class=\"keiko_red\">I\u306f\u5927\u6587\u5b57<\/span><\/strong>\uff09\u306a\u306e\u3067\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br>\u9593\u306estyle\u3082\u5fd8\u308c\u306a\u3044\u3088\u3046\u306b\uff01<br>\u79c1\u306fstyle\u3092\u66f8\u304d\u5fd8\u308c\u3066\u534a\u65e5\u60a9\u3093\u3060\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u5fd8\u308c\u3066\u3082\u30a8\u30e9\u30fc\u304c\u51fa\u306a\u3044\u306e\u3067\u3001\u6c17\u3065\u304d\u306b\u304f\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-2\"><span class=\"sgb-heading__inner sgb-heading--type3\" style=\"background-color:#fff9e5;border-color:#90d581;font-size:1.2em\"><span class=\"sgb-heading__text\" style=\"color:#333\">\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/span><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u521d\u306e\u52d5\u753b\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"utf-8\"&gt;\n    &lt;\/head&gt;\n    &lt;style&gt;\n        \/* \u56f3\u5f62\u306e\u8a2d\u5b9a *\/\n        .shape{\n            position:absolute;\n            height: 70px;\n            width: 140px;\n            border-radius: 10px;\n            cursor: pointer;\n        }\n\n        \/* z-index\u8868\u793a\u7528\u3001\u56f3\u5f62\u306e\u5de6\u4e0b\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u8a2d\u5b9a *\/\n        .shape_text{\n            margin: 0;\n            padding: 0;\n            position:absolute;\n            left: 5%;\n            top: 60%;\n        }\n    &lt;\/style&gt;\n    &lt;body&gt;\n        &lt;!-- \u8584\u3044\u8d64\u8272\u306e\u56f3\u5f62 --&gt;\n        &lt;div class=\"shape\" style=\"z-index:0;background-color:lightsalmon;top:30px;left:70px;\"&gt;\n            &lt;p class=\"shape_text\"&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n\n        &lt;!-- \u8584\u3044\u9752\u8272\u306e\u56f3\u5f62 --&gt;\n        &lt;div class=\"shape\" style=\"z-index:0;background-color:lightskyblue;top:60px;left:140px;\"&gt;\n            &lt;p class=\"shape_text\"&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n\n        &lt;!-- \u8584\u3044\u9ec4\u8272\u306e\u56f3\u5f62 --&gt;\n        &lt;div class=\"shape\" style=\"z-index:0;background-color:lemonchiffon;top:90px;left:210px;\"&gt;\n            &lt;p class=\"shape_text\"&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n\n        &lt;script&gt;\n            \/\/ \u56f3\u5f62\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u56de\u6570\u3092\u30ab\u30a6\u30f3\u30c8\u3059\u308b\u5909\u6570\n            let count = 0;\n\n            \/\/ \u56f3\u5f62\u306b\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u767b\u9332\uff06z-index\u3092\u8868\u793a\n            let eleShape = document.getElementsByClassName(\"shape\");\n            for(var i=0; i&lt;eleShape.length; i++){\n                \/\/ \u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u767b\u9332\n                eleShape[i].addEventListener(\"click\", moveFront, event);\n                \/\/ \u56f3\u5f62\u306bz-index\u3092\u8868\u793a\n                showZIndex(eleShape[i]);\n            }\n            \n            \/\/ \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u8981\u7d20\u306ez-index\u306b\u3001\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u56de\u6570\u3092\u8a2d\u5b9a\u3059\u308b\n            function moveFront(e){\n                \/\/ \u56f3\u5f62\u306e\u30af\u30ea\u30c3\u30af\u6570\u3092\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7\n                count++;\n                \/\/ z-index\u306b\u56f3\u5f62\u306e\u30af\u30ea\u30c3\u30af\u6570\u3092\u8a2d\u5b9a\uff08\u6700\u524d\u9762\u306b\u8868\u793a\u3055\u308c\u308b\uff09\n                e.target.style.zIndex = count;\n                \/\/ \u56f3\u5f62\u306bz-index\u3092\u8868\u793a\n                showZIndex(e.target);\n            }\n            \n            \/\/ \u6307\u5b9a\u3057\u305f\u56f3\u5f62\u306bz-index\u3092\u8868\u793a\u3059\u308b\n            \/\/ z-index\u306f\u56f3\u5f62\u306e\u4e2d\u306e&lt;p class=\"shape_text\"&gt;\u306b\u8868\u793a\n            function showZIndex(eleShape){\n                eleShape.getElementsByClassName(\"shape_text\")[0].innerText = \"Z=\" + eleShape.style.zIndex;\n            }\n        &lt;\/script&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web\u30b7\u30b9\u30c6\u30e0\u306e\u958b\u767a\u3067\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u56f3\u5f62\u3092\u6700\u524d\u9762\u306b\u8868\u793a\u3068\u3044\u3046\u30bf\u30b9\u30af\u304c\u3042\u3063\u305f\u306e\u3067\u3001CSS\u306ez-index\u3092JavaScript\u3067\u8a2d\u5b9a\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002\u5b9f\u969b\u306b\u30b7\u30b9\u30c6\u30e0\u306b\u7d44\u307f\u8fbc\u3080\u524d\u306b\u6b21\u306e\u52d5\u753b\u306e\u69d8\u306aHTML\u3092\u4f5c\u6210\u3057\u305f\u306e\u3067\u3001\u307e\u3068 &#8230; <\/p>\n","protected":false},"author":1,"featured_media":2091,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[8],"tags":[],"class_list":["post-747","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","entry"],"_links":{"self":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/comments?post=747"}],"version-history":[{"count":5,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/747\/revisions"}],"predecessor-version":[{"id":882,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/747\/revisions\/882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media\/2091"}],"wp:attachment":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media?parent=747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/categories?post=747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/tags?post=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}