一个绝对定位的元素如何在没有任何 z-index 的情况下与下一个/下一个元素重叠？答案

【问题标题】：How an absolutely positioned element overlaps the following/next element without any z-index?一个绝对定位的元素如何在没有任何 z-index 的情况下与下一个/下一个元素重叠？
【发布时间】：2013-10-31 04:52:46
【问题描述】：

请在此处查看我的fiddle。

我试图了解绝对定位的“红色六边形”图标如何与没有 z-index 的 input/textarea 元素重叠？

<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 计数，高于正常流中出现的元素？

【问题讨论】：

标签： css css-position z-index absolute

【解决方案1】：

即使没有设置 z-index，绝对定位的项目也会自动与非绝对项目重叠。为了解决这个问题，您需要为所有不想重叠的项目设置一个位置。

要么这样，要么找到另一种放置红色六边形的方法，例如将其设置为背景。

参考：http://www.w3.org/TR/CSS2/zindex.html

【讨论】：

感谢 Marc 的添加参考！
参考正是我要找的！谢谢你们！

【解决方案2】：

不是将图像与文本框一起放置，而是设置文本框的background-image。

Here is the fiddle

【讨论】：

虽然我最初的问题是了解重叠的行为，但感谢您的建议！