jquery - 将Div放在输入框的右上角

Question

我在页面上动态插入 DIV，这是简化的示例：

http://jsfiddle.net/GEgEc/4/

HTML：

<div class="left-column">
    <p>
        <label>Company Name:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox" />

    </p>
    <p>
        <label>Phone:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_PhoneNumberTextBox" __id="105" />         
    </p>
</div>
<div class="right-column">
    <p>
        <label __id="109">Contact Name:</label>
        <input  type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_ContactNameTextBox" __id="110" /> 
    </p>
    <p>
        <label>Email:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_EmailTextBox"  />     </p>
</div>
<div style="clear:both;">
    <input type="submit" value="Submit Request" id="myButton" />
</div>

CSS：

.inputError {
    border: 1px solid #006;
    background: pink;
}
.divError {
    border: 1px solid black;
    background: red;

}
label {
    float:left;
    width:120px;
    text-align:right;
    margin-right:5px;
}
input[type="text"] {
    width: 150px;
}
.left-column, .right-column {
    float:left;
    position: relative;
}
.left-column p, .right-column p {
    padding-bottom: 10px;
}
.left-column {
    margin-right:5px;
}

JS：

$(document).ready(function() {

    $("#myButton").on("click", DoTrick);
});

function DoTrick()
{
    var $input = $("#BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox");

    var $div = $("<div/>")
        .attr("id", "GGG")
        .addClass("divError")
        .text("This field has error");

    $div.insertAfter($input);

}

但理想情况下，只要我知道输入元素我想添加显示在其右上角的 DIV，我通常希望它能够正常工作，这是应该“浮动”的验证消息

现在，当我添加 DIV 时，它会破坏布局并且不会去我需要的地方。

Answer 1

您只需按像素定位任何元素。我认为应该是这样的：

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Answer 2

your.divError 是一个<div>，这意味着它具有 display:block 属性，因此它将位于新行上。

如果您将其<span>改为 a ，它将与输入元素内联（或修改 CSS 类）

Answer 3

不确定我是否理解正确，但您是否正在寻找这样的东西？http://jsfiddle.net/5ZM25/1/

如果您希望它“在输入框的右上角”，可以将其更改为然后将其放置在您想要的位置insertAfter。insertBefore

Answer 4

这可能是 position: absolute 的情况。

见http://jsfiddle.net/HNQMm/3/

添加一个类来包装字段（我使用.relative）并将其设置为“位置：相对”。

然后您的错误框可能如下所示：

.divError {
border: 1px solid black;
background: red;
position: absolute;
top: 0;
left: 50px;

}

.divError 的 top 和 left 值现在是相对于外部的相对 div 的，因此您可以将它们精确地设置在您需要的位置。