来自 javascript 的 CSS 样式位置 id

Question

我这里有一个带有验证脚本的表单 http://www.goedkoopnaarschiphol.nl/bestellentest/bestellen-retour-schiphol/index.php

当您单击已发送时，您会看到来自验证脚本的红色消息。当您将屏幕对准正确的视线并移动屏幕时，它就会出错。当我从 position: absolute 到 relative 时，我什么都看不到了

请问有人能帮帮我吗？

汉斯

.info {
text-align: left;
padding: 5px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #fff;
position: absolute;
display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: -1px 1px 2px #a9a9a9;
-moz-box-shadow: -1px 1px 2px #a9a9a9;
box-shadow: -1px 1px 2px #a9a9a9;
     }

  .error {
background: #f60000;
border: 3px solid #d50000;

    }

  .correct {
background: #56d800;
border: 3px solid #008000;
    }

  .wrong {
font-weight: bold;
color: #e90000;
     }

    .normal {
font-weight: normal;
color: #222;
     }


    <div>
    <form id="jform" action="" method="post">

    <fieldset>
    <legend>Contactgegevens</legend>    
    <label>Voornaam:</label>
    <input id="voornaam" name="Voornaam" /><br />

    <label>Achternaam:</label>
    <input id="achternaam" name="Achternaam" /><br />

    <label>Straatnaam:</label>
    <input id="straatnaam" name="Straat" /><br />


    <label>Huisnummer:</label>
    <input id="huisnummer" name="Huisnummer" /><br />

    <label>Postcode:</label>
    <input id="postcode" name="Postcode" /><br />


    <label>Plaatsnaam:</label>
    <input id="plaatsnaam" name="Plaats" /><br />

    <label>Telefoon:</label>
    <input id="telefoon" name="Telefoon" /><br />

    <label>Mobiel<small> (06-1234567)</small>:</label>
    <input id="mobiel" name="Mobiel" /><br />


    <label>Vertrekdatum<small> (DD-MM-YYYY)</small>:</label>
    <input id="vertrekdatum" name="Vertrekdatum" /><br />

    <label>Ophaaltijd<small> (UU:MM):</small>:</label>
    <input id="vertrektijd" name="Vertrektijd" /><br />


    <label>Aankomstdatum<small> (DD-MM-YYYY)</small>:</label>
    <input id="aankomstdatum" name="Aankomstdatum" /><br />


    <label>Aankomsttijd <small> (UU:MM)</small>:</label>
    <input id="aankomsttijd" name="Aankomsttijd" /><br />


    <label>Vluchtnummer:</label>
    <input id="vluchtnummer" name="Vluchtnummer" /><br />

    <label>Vertrekland:</label>
    <input id="vertrekland" name="Vertrek-land" /><br />
    </fieldset> 


    <fieldset>
    <legend>E-mail:</legend>
    <label>E-mail<small> (piet@hotmail.com)</small>:</label>
    <input id="mail" name="E-mail"/><br />
    </fieldset> 

    <fieldset>
    <legend>Opmerkingen</legend>
    <label style="width: 100%; height: 17px">Heeft u vragen of opmerkingen, zet ze hier onder neer:</label>
    <textarea style="width: 100%;" cols="" name="ritOpmerking" rows="4"></textarea>
    </fieldset>

    <button type="submit" id="send">Verzend uw aanvraag</button>


</form>
</div>

Answer 1

使用相对位置是解决方案，但在您的情况下，框是相对于主体的，例如在电话机上试试这个

top: -719px;
left: 864px;
display: block;
position: relative;
width: 10px;

你有两个选择:

• 玩 top 和 left 相对位置(就像在例子中一样)
• 更简洁的解决方案是将正确的框和输入放在同一个 div 中，这样您的位置将与该 div 相关