CSS Box Model
. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow
of a document, but CSS offers the position property to override it.
When the position of an element is set to relative
, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left
or right
, and top
or bottom
. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
p {Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. Note
position: relative;
bottom: 10px;
}
position
of the h2
to relative
, and use a CSS offset to move it 15 pixels away from the top
of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements.
h2
element should have a position
property set to relative
.
testString: assert($('h2').css('position') == 'relative', 'The h2
element should have a position
property set to relative
.');
- text: Your code should use a CSS offset to relatively position the h2
15px away from the top
of where it normally sits.
testString: assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the h2
15px away from the top
of where it normally sits.');
```
I still think the h2 is where it normally sits.
```