Setting absolute-positioning properties

Now that we have our pseudo element created, and our graphic being assigned to that pseudo element, now we're going to work on positioning this. So inside the dot page space H1 colon after rule, let's hit Return. Let's come in here and set position to absolute. Let's set a right property of zero pixels, and a bottom property of zero pixels. Now, once we assign these positioning properties, you'll notice that that graphic now positions itself based on the overall page, or browser size. This is because positioned elements will position themselves based on their nearest parent in the HTML chain, that also has positioning properties set. So here, since we don't have any positioning properties except for the pseudo-element, it's going to position itself based on the overall browser size, which for most browsers will default to the HTML element. So to position the pseudo element in relation to the H1 tag let's come into the .page H1rule. Let's come in here, and after the text transform let's hit a Return, and Multiposition. Then we'll type relative, then a semicolon. And once we do that, you'll see that now that pseudo element positions itself based on the H1 tag. Now since we're still inside of the .page H1 CSS rule, let's hit a Return, let's set a background color on this. So we'll choose background-color, space, then we'll do pound b1d3 3F; and now our heading has a light green color, which is a little bit lighter than the fold graphic. Now let's come down to the pseudo-element. Let's change the bottom property from 0 to negative 40. Since the actual graphic is 40 pixels by 40 pixels, by setting a bottom property on the positioning to negative 40, that will always ensure that no matter what the height of the H1 tag is, the top of our graphic will always match the bottom of the H1 element, giving us that sort of wrap around flag effect. So now that we have our pseudo-element properly positioned in relation to the H1 tag, next we'll take a look at margin and padding properties on the 1 tag itself to position our heading unit in relation to the page elements.