Absolute positioning

Positioning objects out of the flow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui.

CSS

  • .positionBox {
  • position: relative;
  • }
  • .positionPanel {
  • left: 40px;
  • position: absolute;
  • top: 50px
  • }
Position absolute. More powerful than you could ever imagine.

Those left and top measurements for the panel we're taking out of the document's flow, are pixel measurements from the top left corner of any parent element with the CSS rule: position: relative;.

We apply position: relative; to the parent element to keep the absolute positioned element from going where we don't want it to. If we didn't define this relative controller, our positioned element would assume the default: using the <body> as its parent. In which case, the positioned element would sit 50 pixels from the top of the browser window and 40 pixels left of its left edge.

Note: Consider moving your markup to a different place in the HTML if you're absolutely positioning something with a relative parent many times removed from its own position.

How it works

In our example you can see that the box sits above the other paragraphs, separate from the rest of the text. We have applied position: absolute; to it so that it becomes separate from the layout, in a visual sense anyway, as the underlying HTML remains the same; it's the CSS doing the real work here.