CSS treats each HTML element as its own box, which is usually referred to as the 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, right, top and bottom.
These say how many pixels, percentages, or ems to move the item away from where it is normally positioned.
The following example moves a paragraph 10 pixels away from the bottom:
p {
position: relative;
bottom: 10px;
}
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: Positioning gives you a lot of flexibility and power over the visual layout of a page.
It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom.
This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
No comments:
Post a Comment