Question

请在此处查看我的fiddle。

我试图理解绝对定位的“红色六边形”图标如何与没有z-index的输入/ 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计数，这些计数高于正常流中出现的元素？

Answer 1

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

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

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

Answer 2

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

Here is the fiddle

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

2 个答案: