Html z-index 不适用于 <input>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21081125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index not working for <input>
提问by Jayen
I've got an <svg>that I want to surround an <input>text box. I've set the z-indexof the <svg>to be higher than the containing <div>, and the z-indexof the <input>text box to be even higher, yet the <svg>is still on top of the <input>text box.
我有一个<svg>我想包围一个<input>文本框。我已经设定z-index的<svg>比对含有较高<div>，而z-index在的<input>文本框甚至更高，然而<svg>仍然是在顶部<input>文本框。
<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>
How can I get the input text box to be on top of the SVG?
如何让输入文本框位于 SVG 之上？
(Using Firefox 24 & jQuery Mobile 1.4.0)
（使用 Firefox 24 和 jQuery Mobile 1.4.0）
回答by CRABOLO
I added the following style to form
我添加了以下样式来形成
<form style="position: relative; z-index: 9999;" id="before-list" onsubmit="return false;">
EDIT
编辑
I just added the position: relative; back in to your new fiddle, and it works again
我刚刚添加了位置：相对；回到你的新小提琴，它又可以工作了
z-index needs the element it's on to have a position: relative or fixed, or absolute for it to work
z-index 需要它所在的元素有一个位置：相对的或固定的，或绝对的才能工作
