3

请在这里查看我的小提琴。

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

4

2 回答 2

2

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

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

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

于 2013-10-22T10:57:11.303 回答
1

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

这是小提琴

于 2013-10-22T10:56:21.790 回答