If the child is position:absolute and the parent is overflow:hidden, why does the child overflow?

Question

If the child is position:absolute, the parent is overflow:hidden, and the parent is position:static, the child still overflows:

<

Answer 1

overflow property is not inherited anyhow: http://www.w3schools.com/cssref/pr_pos_overflow.asp

So in your first case it is understandable it is not working, since with static position the browsers put it in the order it reads and overlooks collisions.

In your second case absolute positioning actually sets a space for the container div and then puts the second div into it - thus makes the overflow hidden.

You can imagine it this way: in your first case you created two divs which are not related to each other but positioned on each other in the second case you created a container and forced another div into it by setting the container's overflow to hidden.

Hope it helped easy understanding,

Andrew