All geek questions in one place

DIV space relative to INPUT text

Is there a way to place a DIV compared to INPUT text?

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

I want to place a DIV on top of an input field before the text.

I know that I can put both of them in one div and put it relative to this, but I want to know if there is a way to do this without an extra DIV.

Edit:

I forgot to mention that there can be several nodes in the input node in my input field, so positioning my div ("GE") relative to the parent is not the way to go, because I cannot determine the position of the input inside my parent. I am specifically looking for a way to place one node relative to another when this particular element is the only tag and cannot have any children.

+4
source share
2 answers

For what I investigated, there is no direct solution to my problem. Since the input is a single tag, it cannot have any child nodes, and because of this, it cannot be displayed relative to the input tag.

I assume that the only solution would be either complex javascript or jQuery (.postion ()). If a solution to this problem was absolutely necessary, you would need to find the input position and place the div relative to it, but again, this is not a good solution, because if the input field is moved, the div will remain in the same place if you are not listening to this particular DOM mutation (I don’t even know if this is possible).

That's what I have learned so far, I want to be wrong, so if someone proves to me that I'm wrong, I will be pleased :)

0
source

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

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

Check out this JSFiddle.

+1
source

Source: https://habr.com/ru/post/1438678/

More articles:


All Articles