Written by Sean Behan on Sun Jun 17th 2012

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!

Tagged with..
#absolute #css #positioning #relative #Programming

Just finishing up brewing up some fresh ground comments...