Menu
How can I place an object without updating the flow of other objects, but specify coordinates relative to the parent?
To clarify,
position: relative; top: -30px; left: 600px; updates the flow of following objects,
position: absolute; top: -30px; left: 600px; doesn't update flow but is relative positioning.
I need not to update the flow, but to specify relative positioning. I can also use Javascript solution.
EDIT
I think a better example would be this: I have a document, I now want to place a <p> which displays over the existing document without changing the flow (think of a watermark). I also have some specific <div class='abc'>, with respect to which I know that I want to place the new <p> at say coordinates (600,-30).
904
Relative positioning and flowIf you give an item relative positioning with position: relative , it remains in flow. However, you are then able to use the offset values to push it around.
Yes. You will not be able to work with absolutely positioned elements any more, for example - the absolute positioning will always be relative to the parent element, which is almost never the desired result.
Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
Apply position: relative; to the parent element, and use position: absolute; top: whatever; left: whatever on the child element. You can also use a z-index: something to make the original content of the parent element overlap the child element with the absolute positioning.
Not sure if I totally get what you mean, though... And I think this is supposed to be on http://www.doctype.com/, because it isn't really about programming.
152
I think what I was looking for is width:0;height:0; so that the flow after is not realigned because of this element. I wasn't sure initially however, that the object will be displayed at all if I set it to have 0 dimensions.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
