绝对定位的元素如何在没有任何 z-index 的情况下与下一个/下一个元素重叠? [英] How an absolutely positioned element overlaps the following/next element without any z-index?
问题描述
请在此处查看我的fiddle.
我想了解绝对定位的红色六边形"图标如何在没有 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-index 计数?
Do the absolutely positioned elements have a separate z-index count which are higher than the elements occurring in normal flow ?
推荐答案
绝对定位的项目会自动重叠非绝对项目作为标准，即使没有设置 z-index.为了解决这个问题，您需要为所有不想重叠的项目设置一个位置.
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屋！
