SVG 真的应该覆盖这个对话框吗？

Question

一个 SVG 标签覆盖了以下代码段的框，即使它比框少 z-index。

片段：

.nicebox_overlay { width: 100%; height: 100%; z-index: 1; display: table; text-align: center; background: rgba(0,0,0,.1); }
.nicebox_container { display: table-cell; vertical-align: middle; }
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; }
.nicebox_inner_content { z-index: 600; color: white; padding: 8px; box-sizing: border-box; }
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; z-index: 1; }
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); z-index: 1; }

<div class="nicebox_overlay">
            <div class="nicebox_container">
                <div class="nicebox_content">
                    <div class="nicebox_svg_tleft">
                        <svg>
                            <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" />
                            <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" />
                        </svg>
                    </div>
                    <div class="nicebox_inner_content">
                        <textarea style="width: 240px; height: 240px">Try and enter something here...</textarea>
                    </div>
                    <div class="nicebox_svg_bright">
                        <svg>
                            <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" />
                            <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

我只是想让 SVG 放在后面，而片段中的文本区域是可编辑的。

感谢任何帮助。

PS: 我必须使用 position: static 作为 .nicebox_inner_content class.

编辑： 使用 z-index: -1 有效，但它将整个 SVG 元素隐藏在 body 标签后面。

EDIT mkII: 我也可以使用其他 positions，只要它们随内部元素自动调整大小，因为这个框需要灵活。

编辑 mkIII: 网站：https://www.forcemagic.xyz/_ptExp!542/ 该片段是初始网站的简化和重新着色版本。

Answer 1

此调整后的代码段应该符合您的要求，看起来与您的初始代码段相同，但 textarea 可用。

.nicebox_overlay { width: 100%; height: 100%; z-index: 1; display: table; text-align: center; background: rgba(0,0,0,.1); }
.nicebox_container { display: table-cell; vertical-align: middle; }
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; }
.nicebox_inner_content { z-index: 600; color: white; padding: 8px; box-sizing: border-box; }
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; z-index: -1; }
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); z-index: -1; }

<div class="nicebox_overlay">
            <div class="nicebox_container">
                <div class="nicebox_content">
                    <div class="nicebox_svg_tleft">
                        <svg>
                            <rect x="8px" y="8px" width="2px" height="200px" style="fill: #EEE;" />
                            <rect x="8px" y="8px" height="2px" width="180px" style="fill: #EEE;" />
                        </svg>
                    </div>
                    <div class="nicebox_inner_content">
                        <textarea style="width: 240px; height: 240px">Try and enter something here...</textarea>
                    </div>
                    <div class="nicebox_svg_bright">
                        <svg>
                            <rect x="8px" y="8px" width="2px" height="200px" style="fill: #EEE;" />
                            <rect x="8px" y="8px" height="2px" width="180px" style="fill: #EEE;" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

Answer 2

添加不需要的 "z-index" 你可以简单地做到这一点：

只是我只给两个类添加了z-index。

.nicebox_content (
    z-index: 0;
}
.nicebox_inner_content (
    z-index: 1;
}

这里是我的建议代码：

.nicebox_overlay { position: relative; width: 100%; height: 100%;display: table; text-align: center; background: rgba(0,0,0,.1); }
.nicebox_container { display: table-cell; vertical-align: middle; }
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; z-index:0;}
.nicebox_inner_content { position: absolute; left:0; right:0; top: 15px; color: white; padding: 8px; box-sizing: border-box; z-index:1; }
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; }
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); }

<div class="nicebox_overlay">
 <div class="nicebox_inner_content">
  <textarea style="width: 230px; height: 230px">Try and enter something here...</textarea>
 </div>
 <div class="nicebox_container">
  <div class="nicebox_content">
   <div class="nicebox_svg_tleft">
    <svg>
     <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" />
     <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" />
    </svg>
   </div>
   <div class="nicebox_svg_bright">
    <svg>
     <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" />
     <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" />
    </svg>
   </div>
  </div>
 </div>
</div>

Answer 3

我想这就是你想要的，pointer-events: none;

.nicebox_overlay { width: 100%; height: 100%; z-index: 1; display: table; text-align: center; background: rgba(0,0,0,.1); }
.nicebox_container { display: table-cell; vertical-align: middle; }
.nicebox_content { display: inline-block; text-align: left; background: #EEE; min-height: 250px; min-width: 250px; position: relative; margin: 16px; }
.nicebox_inner_content { z-index: 600; color: white; padding: 8px; box-sizing: border-box; }
.nicebox_svg_tleft { position: absolute; top: -10px; left: -10px; z-index: 1; pointer-events: none;}
.nicebox_svg_bright { position: absolute; bottom: -10px; right: -10px; transform: rotate(180deg); z-index: 1; pointer-events: none;}

<div class="nicebox_overlay">
            <div class="nicebox_container">
                <div class="nicebox_content">
                    <div class="nicebox_svg_tleft">
                        <svg>
                            <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" />
                            <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" />
                        </svg>
                    </div>
                    <div class="nicebox_inner_content">
                        <textarea style="width: 240px; height: 240px">Try and enter something here...</textarea>
                    </div>
                    <div class="nicebox_svg_bright">
                        <svg>
                            <rect x="8px" y="8px" width="2px" height="200px" style="fill: #A22;" />
                            <rect x="8px" y="8px" height="2px" width="180px" style="fill: #A22;" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

SVG 真的应该覆盖这个对话框吗？

Should SVG really be overlaying this dialog?

html

css

svg

z-index