Position Inline Element Relative to Container

Question

I want an element in HTML to be positioned relative to it's parent, similar to this question, but using inline.

I have a fiddle to demonstrate. For this example, I would like the textbox to cover the text (using margin:0;, not a negative value.

Can it be done?

you want to hide text? I mean you want text box on your text? — Mr. Alien, Jul 23 '12 at 07:29
@JNF am posting it as my answer you can mark it correct so that others can refer it directly, I posted it as a comment because I was not getting your question properly — Mr. Alien, Jul 23 '12 at 08:01

Mr. Alien · Accepted Answer · 2012-07-23T08:36:04.433

3

Try using position:relative; and position: absolute; like this :

Or just use left: 0px; instead of margin but make sure that the parent div to be positioned relative

edited Jul 23 '12 at 08:36

answered Jul 23 '12 at 08:02

Mr. Alien

It was actually the `left:0;` that did the trick, but you helped me hit the answer. – JNF Jul 23 '12 at 08:06
You should probably edit the answer to include that detail... :) – JNF Jul 23 '12 at 08:08

score 0 · Answer 2 · answered Jul 23 '12 at 07:09

0

<div>
    <input value="Text" />
</div>

Or are you using this for something other than inputs?

Since you're already using absolute positioning, you could just do left: 0.

answered Jul 23 '12 at 07:09

Chad

I need the `Text` where it is - not inside the `input`. – JNF Jul 23 '12 at 07:13
So you want to stack inline elements using relative positioning and no negative margins? – Chad Jul 23 '12 at 07:14

2 Answers2