ForceMagic ForceMagic - 4 months ago 10
HTML Question

Should SVG really be overlaying this dialog?

an SVG tag is overlaying the following snippet's box, even though it's given less

z-index
than the box.

Snippet:



.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>





I just simply want the SVGs to be in the back and the textarea in the snippet to be editable.

Any help is appreciated.

PS: I must use
position: static
for the
.nicebox_inner_content
class.

EDIT: Using
z-index: -1
works, but it hides the whole SVG element back behind the
body
tag.

EDIT mkII: I can also use other
position
s as long as they auto-resize with the inner elements, because this box needs to be flexible.

EDIT mkIII: The website: https://www.forcemagic.xyz/_ptExp!542/ The snippet is a simplified and recolored version of the initial site.

Answer

This adjusted Snippet should meet your requirements, looks same like your initial snippet but textarea is usable.

.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>