0

こんにちは私はz-indexの使用に問題があります。いくつかの入力フィールドがあるフォームがあります。それらの横に、phpエラーメッセージをエコーするためのいくつかのエラーdivがあります。私が抱えている問題は、エラーが設定されたときにのみ発生するエラーdivが、入力フィールドの改行につながることです。

.wrapper   #mainframe   #left #frame form fieldset ul .fr {
    width: 180px;
    float: left;
    margin-bottom: 18px;
    margin-left: 25px;
}
.wrapper #mainframe   #left #frame form fieldset ul input.err {
    width: 180px;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    margin-top: 3px;
    outline:none;   
    background-image: url(../images/error.png);
    background-repeat:no-repeat;
    background-position: 172px 50%;
}
.wrapper #mainframe #left #frame form fieldset ul .erl {
    color: #FFF;
    position: relative;
    z-index: 1;
    background-color: #f23;
    width: 200px;
    height: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    left: +217px;
    top: 25px;
}

ここにhtmlコードがあります：

<li class="fr">
<label for="a">a</label>
<?php if (isset($errors['a'])):?>
<input class="err" type="text" id="a" name="a" value="<?php echo isset ($_POST['a'])? $_POST['a'] : ''; ?>" tabindex="20" autocomplete="off"/>
<?php if ( isset($errors['a']) 
&& empty($errors['a'][0]) == true ):?>

<?php echo "<div class='erl'>"; 
echo $errors['a'][0];
echo "</div>";
endif;?>

<?php endif;?>

だから私はこれが起こっている理由を理解していません。z-indexを使用することは、2つのレイヤー（z-index：0とz-index：1）を作成するようなもので、2番目のレイヤーのz-index：1の左側と右側に十分な場所があるはずだと思いました。これを解決する方法を教えてくれる人がいたら、本当にありがたいです。どうもありがとう。

4

3 に答える 3

1

意図しない間隔と全体の幅を追加している可能性のあるパディングやマージン（http://css-tricks.com/the-css-box-model/）などを探します。

また、z-indexを適用する要素の位置が明示的に宣言されていることを確認してください...また、親要素の位置も確認してください（http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp）。

最後に、hasLayoutプロパティ（http://www.satzansatz.de/cssd/onhavinglayout.html）の問題を確認します。Z-indexはスタックの順序ほどドキュメントの流れ方を変えないので、これはVinnyが話していることかもしれません。エラーメッセージでposition：absoluteを使用して、ドキュメントの全体的なフローからエラーメッセージを削除してみてください。

于 2012-07-23T20:18:00.343 に答える
0

改行を避けるために、ドキュメントのフローからエラー要素を削除する必要があります。属性はそれz-indexとはまったく関係がありません。要素のスタック順序にのみ影響します。それ以外の場合は、位置に依存しません。

これが、このjsfiddleを紹介した理由です。あなたの悩みを解決するのを助けるための代替手段。

于 2012-07-23T19:17:55.733 に答える
-1

これを試して：

HTML：

<li class="fr">
    <label for="a">a</label>
    <input class="err" type="text" id="a" name="a" value="" tabindex="20" autocomplete="off"/>
    <div class='erl'> Error text</div>
    <div class="sp"></div>
</li>

CSS：

//for label
.fr label, .fr .err, .fr .erl {
    float:left;
}
.fr .sp {
    clear:both;
}
于 2012-07-23T19:29:39.200 に答える