z-index 不适用于 <input>答案

【问题标题】：z-index not working for <input>z-index 不适用于 <input>
【发布时间】：2014-01-12 22:31:42
【问题描述】：

我有一个<svg>，我想将它包围在一个<input> 文本框内。我已将<svg> 的z-index 设置为高于包含<div>，并将<input> 文本框的z-index 设置为更高，但<svg> 仍位于顶部<input> 文本框。

http://jsfiddle.net/6R2mf/1/

<form id="before-list" onsubmit="return false;">
    <label for="search" class="ui-hidden-accessible">Label:</label>
    <div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"><span class="ui-helper-hidden-accessible" aria-live="polite" role="status"></span>
        <input style="z-index: 10000;" autocomplete="off" class="ui-autocomplete-input" name="search" id="search" value="" placeholder="placeholder" data-type="search" type="text"><a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a>
    </div>
</form>
<svg style="position: absolute; left: 0px; top: 0px; z-index: 1001;" xmlns="http://www.w3.org/2000/svg" width="396" version="1.1" height="78">
    <path d="M37.321735818577594,19.412056931773776C91.00900384635584,19.71827132609725,306.20767155776537,15.079895914223181,359.3368606653108,21.253021635495596C412.4692927191486,27.426524157459045,410.1732367732173,50.26181430495186,356.10649891451214,56.45301593533142C302.039761055807,62.64421756571098,86.9940586922537,64.75550694155167,34.93643351307978,58.40023141777294C-17.12119166609414,52.04495589399421,-10.036532153974994,24.179328007664637,43.760747839468635,18.32136279265903C97.55802783291226,12.463397577653424,305.393552534696,22.43059390522592,357.72011347374155,23.252440127739302" stroke="#000000" fill="none" style=""></path>
</svg>

如何让输入文本框位于 SVG 之上？

（使用 Firefox 24 和 jQuery Mobile 1.4.0）

【问题讨论】：

请提供足够的代码来重现问题问题本身。您不应该依赖外部链接，因为如果它们中断，问题将变得毫无用处。

标签： html css forms svg z-index

【解决方案1】：

http://jsfiddle.net/6R2mf/4/

我在表单中添加了以下样式

<form style="position: relative; z-index: 9999;" id="before-list" onsubmit="return false;">

编辑

http://jsfiddle.net/6R2mf/8/

我刚刚添加了位置：relative;回到你的新小提琴，它又可以工作了

z-index 需要它所在的元素有一个位置：相对的或固定的，或绝对的才能工作

【讨论】：

hrm，这似乎在小提琴中有效，但在实际页面上无效。在jsfiddle.net/6R2mf/7 中，我在<form> 之外添加了标签，<svg> 又回到了顶部。（将z-index 添加到外部标签有效，但我怎么知道要添加到哪个标签？）
我看到你添加了position:relative。这有什么意义？
不知道为什么，但这在我正在执行此操作的实际页面上不起作用。 <svg> 是absolute 到body，但是将absolute 设置为<form> 之外的标签使得这一切都像我预期的那样工作。谢谢！