Позиция Див над правом верхнем углу поля ввода

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

Это может быть случай для положения: абсолютный.

см http://jsfiddle.net/HNQMm/3/

добавить класс, чтобы обернуть поля (я использовал .relative) и установите его в положение «: относительное».

, а затем ваш ящик ошибки может выглядеть следующим образом:

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

} верхнего и левого значение

.divError является в настоящее время по отношению к внешнему, относительно DIV, так что вы можете установить их именно там, где вам нужны их.

Answer 2

Вы просто позиционируете любой элемент по пикселям. Я думаю, что это должно быть что-то вроде этого:

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

Answer 3

your.divError является <div>, что означает, что он имеет дисплей: атрибут блока, так что он будет сидеть на новой линии.

Если вы сделали его <span> вместо этого он будет сидеть рядный с входным элементом (или изменить класс CSS)

Answer 4

Не уверен, если я вас правильно понял, но вы ищете что-то вроде этого? http://jsfiddle.net/5ZM25/1/

The insertAfter может быть изменен на insertBefore, а затем поместить его там, где вы хотите быть, если вы хотите «над правом верхнем углу поля ввода».