Is the top offset for fixed divs required in the CSS rule?

Hey Jason,

Can you post all of the code in question? If you haven't posted code here before, check out either the Markdown Cheatsheet or this helpful link to format your code: How To Post Code

Hi Marcus -- thanks for the response! Here's the code I'm looking at from the Box Model section of CSS Foundations:

<!-- <div class="fixed">fixed</div>

So, he simply creates a div, then he creates the CSS rule below to fix the div at the top of the viewport:

        .fixed {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #000;
}

I thought the default behavior of the fixed position started at the viewport's "origin" point for lack of a better word, so I don't understand why Guil added "top: 0;" to his CSS rule. Indeed, when I rem out that property, the div drops down about 60px below the top of the viewport.

I went back, found the course and skimmed through the video and found where you are talking about. When you originally use position: fixed, it is positioning the element using the containing element as its viewport. So, if there are no defined contained elements, it will use the body as the containing element, but it must still have specified position values in order to go where you desire. That's why Guil used the "top: 0;" property to position the .fixed div to the top of the screen.

For more information, check out this MDN article: Positioning#Fixed

Hi Marcus -- I don't totally understand what you mean (I'm a newb) when you say that position:fixed uses the containing element as it's viewport. Again, the way I understand it is that it uses the browser viewport as the default. I stole this from an article out on the web: "the viewport (browser/device window) positions the fixed element, as opposed to any parent element. " So, do you mean that it's using the body element as it's viewport? I'm not sure what defines an element as a containing element, unless you mean that it's the parent element of the child with the position:fixed property.

Sorry to be a pain about things! Thanks again.