CODEWITHSUNDEEP
cssdom
Sandro Dolidze
Sandro Dolidze

Reputation: 177

postion DIV relative to text INPUT

Is there any way I can postion DIV relative to text INPUT?

<input type="text" id="inp" style="padding-left: 20px" data-kb="GE" />
<div>GE</div>

I want to position DIV on top of input field, before text.

I know I can put both of them in same div and postion it relative to it, but I want to know, is there any way to do it without additional DIV.

Edit:

I forgot to mention that there may be multiple nodes in a parent node of my input field, so positioning my div("GE") relative to parent is not a way to go, because I can not determine position of input inside its parent. I'm specifically looking for a way to position one node relative to other, when that particular element is a single tag and can not have any children.

Upvotes: 4

Views: 1363

Answers (2)

Sandro Dolidze
Sandro Dolidze

Reputation: 177

For what I've researched there is no direct solution to my problem. Because input is a single tag, It can not have any children nodes and because of that, It can not be rendered relative to input tag.

I guess the only solution would be either with complex javascript or jQuery (.postion()). If solving this problem was absolutely necessary you would have to find postion of input and place div relative to it, but then again, it is not a good solution, because if input field gets moved div will stay in the same place, unless you listen to that particular DOM mutation (I don't even know if it's possible).

That is what I've learned so far, I wish to be wrong, so If someone proves me wrong, i would be pleased :)

Upvotes: 1

PJ McCormick
PJ McCormick

Reputation: 1993

You can accomplish this by applying a negative margin-top: to your div:

div { 
  margin-top: -16px;    
}​

Check out this JSFiddle.

Upvotes: 1

Related Questions