position: absolute;

Positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
If there is no positioned ancestor, it uses the document body, and moves along with page scrolling.
Absolute positioned elements are removed from the normal flow, and can overlap elements.

Example usage

The parent element
.MyClassNameParent {
  width: 300px;
  height: 300px;
  position: relative;
}
Child elements
.MyClassNameChild1 {
  position:absolute;
  top: 20px;
  right: 0px;    /*Pixels left from right edge*/

  width: 100px;
  height: 20px;
  border: 1px solid #F00;
}

.MyClassNameChild2 {
  position:absolute;
  bottom: 100px;    /*Pixels up from bottom edge*/
  left: 30px;

  width: 100px;
  height: 20px;
  border: 1px solid #F00;
}

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *