Relatively position an element without it taking up space in document flow

Question

How can I relatively position an element, and have it not take up space in the document flow?

Answer 1

From reading up a little, it seems you can absolute position an element as long as the parent element is relatively positioned. That means if you have the CSS:

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

Then the child element won't take up any space in the document flow at all. You can then position it using one of the "left", "bottom", etc, properties. The relative positioning on the parent shouldn't usually affect it because it will be positioned at its original position by default if you don't specify "left", "bottom", etc.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/