#our-content {

border: 1px solid blue;

position: absolute;

top: 0;

left: 0;

}

Now let’s see how that changes our page (see Figure 6.2).

6.2

Notice how our content is now taken out of the flow and position ‘absolutely’ to its parent? Notice how it also ignores all padding inside the box and positions itself relative to its parents’ edges? This technique is widely used across the web, and I’m sure you can see why. It’s extremely versatile and can help out a lot when defining page layouts.

Now let’s see what happens if we remove the position: relative attribute from the second-level div and place the rule over in the top-level div like so: