Jquery 将Div放置在输入框的右上角

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

HTML:

JS:

$（文档）.ready（函数（）{
美元（“#我的按钮”）。点击（“点击”，DoTrick）；
});
函数DoTrick（）
{
var$input=$（“#BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox”）；
变量$div=$（“”）
.attr（“id”、“GGG”）
.addClass（“潜水员”）
.text（“此字段有错误”）；
$div.insertAfter（$input）；
}

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

---

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

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

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

您的.diveror是一个

，这意味着它具有display:block属性，因此它将位于新行上

---

如果您将它改为

，它将与输入元素（或修改CSS类）内联。

不确定我是否正确理解您的意思，但您是否在寻找类似的内容

---

可以将

insertAfter

更改为

insertBefore

，然后将其放置在“输入框右上角”所需的位置。这可能是位置：绝对的情况

看

添加一个类来包装字段（我使用了.relative），并将其设置为“position:relative”

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

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

}

---

.diveror的顶部和左侧值现在与外部相对div相对，因此您可以在需要的位置精确设置它们。

不是吗？是的，我想我需要简化

$(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);

}

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

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