绝对定位的元素如何与后一个/下一个元素重叠而没有任何z-index？ [英] How an absolutely positioned element overlaps the following/next element without any z-index?
问题描述
请在此处查看我的小提琴。
我试图了解绝对定位的红色六边形图标如何与没有z-index的input / textarea元素重叠？
I'm trying to understand how the absolutely positioned "red hexagon" icon overlaps the input/textarea element without a z-index ?
<style>
.c-icon-error-a {
height: 17px;
width: 18px;
}
.c-icon-v2 {
background-image: url("http://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索引计数，该计数高于正常情况下出现的元素流？
Do the absolutely positioned elements have a separate z-index count which are higher than the elements occurring in normal flow ?
推荐答案
绝对定位的项目将自动与非绝对项目重叠，即使没有设置z索引也是如此。要解决此问题，您需要为所有不希望重叠的项设置位置。
Absolutely positioned items will automatically overlap non-absolute items as standard, even without a set z-index. To get around this you need to set a position for all items you don't want to overlap.
要么，要么找到另一种放置红色六边形的方法，例如将其设置为背景。
Either that or find another way of placing your red hexagon, such as setting it as a background.
参考： http://www.w3.org/TR/CSS2/zindex.html
这篇关于绝对定位的元素如何与后一个/下一个元素重叠而没有任何z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
