Ok, I am going through this book and most of it makes sense but something I went over today does not.

It is from p. 205-206 from the HTML Utopia: Designing Without Tables. It is dealing with positioning a sidebar. In the CSS you put:

Code CSS:
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 220px;
background-color: #256290;
Then when you view the sidebar in the browser, it is in the top right of the window. The book goes on to explain that an element is positioned relative to its parent's element's position. In this case, the sidebar does not have a parent element so the viewport is the positioning context.

Then it goes on to say that there is an elelment that can be positioned to provide us with a useful positioning context-the div with the id="main", which was already in the style sheet.

It says to add the following (which is the first 4 lines--margin-top was already there) to the main id:

Code CSS:
#main {
position: relative;
top: 0;
left: 0;
width: 100%;
margin-top: 10px;

Because of the added declarations (regarding position, top left, width) it makes #main as the parent of the #sidebar and I don't understand why that is. Can anyone tell me please?