VocabReminder
English dictionary with notifications so you won't forget what you're studying!
Click here for more info about the app
VocabQuiz
The app that quizzes and scores you on your vocabulary!
Click here for more info about the app

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!

Tagged w/ #absolute #css #positioning #relativeprogramming