3

ここで私のフィドルを見てください。

絶対に配置された「赤い六角形」アイコンが 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 カウントがありますか?

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 に答える