How an absolutely positioned element overlaps the

2019-07-07 08:15发布

问题:

Please see my fiddle here.

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>

Do the absolutely positioned elements have a separate z-index count which are higher than the elements occurring in normal flow ?

回答1:

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.

Reference: http://www.w3.org/TR/CSS2/zindex.html

回答2:

Instead of placing image along with text box, set background-image of text box.

Here is the fiddle