CSS Positioning Margin Trouble

Question

I am unsure how to position elements using css, as when I use methods like the following, whenever I resize the browser, the elements stay in the same place instead of where

Answer 1

CSS positioning can be tricky to understand correctly, but once you do, you'll find it very useful.

Try this: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Basically, to position anything that needs to be locked to a parent or a container element, the parent or container element itself needs to be positioned as well (absolute, or relative, doesn't matter) this is called positioning context. If an absolutely positioned element cannot find a parent or container that is positioning itself, it will then use the `body as the positioning context.

So in your example, if i were to to guess without seeing your HTML and more of your CSS,

adding position:relative to #header would then allow .logo to position itself absolutely from the top left of the #header element.

Also important to remember that absolute positioning takes the element out of the normal flow of the document.