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

html css positioning css-position
Web_Designer picture Web_Designer · May 18, 2011 · Viewed 88k times · Source

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

Answer

Nightfirecat picture Nightfirecat · May 18, 2011

What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that:

<div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>

Related questions

Position by center point, rather than top-left point

Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has width: 500px; and my child element has /*some width, for this example let's …

Read More
CSS: How to make a div block *not* take space in its parent container

If I have 2 div tags: <div id="parentDiv"> <div id="childDiv"><!-- other html --></div> <!-- parent div html --> </div> I want the content of <…

Read More
Absolute positioning with percentages giving unexpected results

Please consider this jsfiddle, containing this html code: <div id="container"> <div id="item">TEST</div> </div> And some CSS: #container { border: 1px solid red; height: 100px; width: 100px; } #item { border: 1px …

Read More