Why doesn’t css 100% - 100% work without absolute?

question 1) I have this http://jsfiddle.net/Qx9uG/1/ working with absolute. When I remove the absolute, http://jsfiddle.net/Qx9uG it doesn’t work. Why is that?

question 2) why do I get no result if I change width from % to px and height px to % ?

http://jsfiddle.net/SGpb2/2/ vs. http://jsfiddle.net/SGpb2/1/

.box {
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;


Because 100% of 0 is also 0.

Define the parent elements, in this case body/html.

jsFiddle example

html, body {

The reason it works with absolute positioning is because absolutely positioned elements are taken out of the flow of the document, thus their parent’s dimensions don’t need to be defined.