22 May 2010, 11:06am
Programming:
by

1 comment

Offset an Element with Relative Position Property with CSS Without Taking Up Any Space in the Document

Using CSS positioning it’s possible to offset an element and collapse its width and height where it would normally appear. Wrapping the content in an absolute positioned element, the space that the element would normally take up is collapsed.

<div style='position:relative;top:-10px;left:-100px;color:blue;width:50px;'>
  <div style='position:absolute;top:0px;left:0px;'>
      Position of this element will be -100px from the left and -10px from the top. Because it is wrapped
      by an absolute positioned element, the original location of this element will be collapsed.
   </div>
</div>

Here is an example

[this is where the div should be]

Position of this element will be -100px from the left and -10px from the top. Because it is wrapped
by an absolute positioned element, the original location of this element will be collapsed.

but we see that this block of text is next in line instead!

  • http://www.notethenewsoftheworld.co.uk Matt Langley

    Hi,

    Thanks so much for this. Helped me out a lot. I might even get some sleep tonight.

    Didn’t seem to work for me though, until I realised that having a css height specified overrules the collapse, so in case anybody else has this issue, just remove any height or width specifications (in my case the width matter to force wrapping, but the height need to collapse). Don’t worry, the ‘overflow’ will still render (unless you suppress it with overflow:hidden or overflow:scroll).

    Thanks again,

    Matt.

 
←    →
 

Recent Posts

Linkroll