In order to position elements, we need to say what kind of positioning we’re using. In this case, the positioning will be absolute. And then, we need to align the element relative to its top, its left, its bottom and/or its right.
ul#menu {
background-color: tan;
border: solid .1em grey;
padding-left: 0;
width: 16em;
position: absolute;
top: 0;
left: 0;
}
This places the element at the very top of the page, with its top at the very top of the page, and its left side at the very left of the page (right: 0 would put its right side at the very right of the page).
While we’re doing this, let’s adjust the margins and padding on the element:
ul#menu {
background-color: tan;
border: solid .1em grey;
padding-left: 0;
width: 16em;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
padding-bottom: 1em;
}
That’s starting to get useful. We could have done the same thing by floating the navigation menu, but that would require putting the navigation menu at the top of the review text. The menu is not more important than the review—people don’t come to our page for the navigation. They come to read our review. Positioning allows us to adjust the page structure for semantic importance. It makes our pages more accessible to alternative browsers, such as browsers for the blind and search engines.
