请看我的fiddle http://jsfiddle.net/CNKsx/ here.
我试图了解绝对定位的“红色六边形”图标如何在没有 z-index 的情况下与 input/textarea 元素重叠？
<style>
.c-icon-error-a {
height: 17px;
width: 18px;
}
.c-icon-v2 {
background-image: url("https://i.stack.imgur.com/RSjot.jpg");
background-repeat: no-repeat;
display: inline-block;
height: 14px;
vertical-align: middle;
width: 14px;
}
.c-icon-error-a {
margin: 4px;
position: absolute;
}
ul li {
margin-bottom:15px;
}
</stlye>
<body>
<ul>
<li>
<span class="c-icon-v2 c-icon-error-a"></span>
<input type="text" value="" id="Validation_Field1" name="Validation.Field1" />
</li>
<li>
<span class="c-icon-v2 c-icon-error-a"></span>
<textarea rows="5" cols="25" name="txtarea" id="txtarea"></textarea>
</li>
</ul>
</body>
绝对定位的元素是否具有单独的 z 索引计数，该计数高于正常流中出现的元素？
即使没有设置 z-index，绝对定位的项目也会按照标准自动重叠非绝对项目。为了解决这个问题，您需要为所有不想重叠的项目设置一个位置。
或者找到另一种放置红色六边形的方法，例如将其设置为背景。
参考：http://www.w3.org/TR/CSS2/zindex.html http://www.w3.org/TR/CSS2/zindex.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
