Does padding of relatively positioned element affect (0,0) of absolutely positioned child element?

Question

This is a CSS issue that doesn't make sense to me..

Right now I have something like this:

.container {
  height: 500px;
  width: 500px;
  position: relative;
  padding: 10px;
}

.child {
  top:0px;
  left:0px;
  position:absolute;
  width: 100px;
  height: 100px;
}

The child right now disregards padding of parent. This seems counter-intuitive to me. Am I missing a quick fix (I can't add padding/margin to child)? Did I mess up the DOCTYPE?

Thanks! Matt Mueller

Answer 1

Since you have specified position absolute for the child element this behavior is the correct one. The child will be positioned absolutely with the left and top value.

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

Visual Formatting model - Absolute positioning