CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Mouliyan
Mouliyan

Reputation: 470

How to add elements to an specified position without influence of other elements?

I want to put elements on a page by mouse click, exactly where the user clicks. So I enter an string to the div by .append().

The problem is: how can I input two elements into div without other elements effect. I tried absolute position by margin and relative by top and left, but no result,

Here in this (demo..) I simplified what I am trying to do, by clicking on generator1 and generator2, on the page should appear two buttons side by side, but appears each on on a row.

hmm, another thing: "I am a n00b in CSS" ;)

Upvotes: 0

Views: 161

Answers (1)

ahren
ahren

Reputation: 16959

DEMO: http://jsfiddle.net/KADqt/2/

An absolute positioned element won't affect other elements, as it's removed from the document flow. Also, just use top, and left, instead of margin-top, margin-left. An absolute positioned element will position itself off it's nearest non-static parent element. In the demo above, I have changed the position of the container to relative - so the new absolute positioned elements will base their top/left values off it's container.

EDIT: I have updated the demo to include random top/left values for the first generator button, to illustrate that no other elements are being affected by newly generated ones.

Second EDIT: I have added another click handler to demonstrate how you would go about positioning an element relative to where the user clicks, which you mentioned wanting.

DEMO: http://jsfiddle.net/KADqt/4/

Upvotes: 2

Related Questions