SVG真的要覆盖这个对话吗？

时间：2016-07-20 10:06:41

标签： html css svg z-index

SVG广告代码覆盖了以下代码段的标签，即使它的价格低于z-index。

段：

＆＃13;
＆＃13; 
.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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我只是希望SVG位于后面，并且片段中的textarea可以编辑。

感谢任何帮助。

PS：我必须将position: static用于.nicebox_inner_content课程。

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

编辑mkII：只要他们使用内部元素自动调整大小，我也可以使用其他position，因为此框需要灵活。

编辑mkIII：网站：https://www.forcemagic.xyz/_ptExp!542/该代码段是初始网站的简化版本。

3 个答案:

答案 0 :(得分：2)

此调整后的代码段应符合您的要求，与您的初始代码段相同，但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>

答案 1 :(得分：0)

添加不需要的＆＃34; z-index＆＃34;你可以简单地实现这个目标：

我刚刚将z-index添加到两个类中。 

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

这里是我建议的代码：

＆＃13;
＆＃13; 
.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); }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我认为这就是你想要的，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>

相关问题
最新问题