Comments on: CSS Tip: Positioning Part 2 - Static vs Fixed http://www.screenflicker.com/blog/coding/css-tip-positioning-part-2-static-vs-fixed/ Web design and development in Calgary Wed, 08 Sep 2010 14:49:11 +0000 http://wordpress.org/?v=2.6 By: CSS Tip: Positioning Part 1 Screenflicker Developments http://www.screenflicker.com/blog/coding/css-tip-positioning-part-2-static-vs-fixed/#comment-518 CSS Tip: Positioning Part 1 Screenflicker Developments Mon, 15 May 2006 04:03:22 +0000 http://www.screenflicker.com/blog/?p=23#comment-518 [...] In the next installment of the CSS Tip: Positioning I’ll cover the static and fixed positioning properties. [...] [...] In the next installment of the CSS Tip: Positioning I’ll cover the static and fixed positioning properties. [...]

]]> By: Mike http://www.screenflicker.com/blog/coding/css-tip-positioning-part-2-static-vs-fixed/#comment-21 Mike Mon, 05 Sep 2005 16:59:00 +0000 http://www.screenflicker.com/blog/?p=23#comment-21 Yes, static keeps elements in the normal flow. If you look at the <a href="http://www.screenflicker.com/tests/css/staticfixed1.html" title="First example test page" rel="nofollow">test page from the first example</a> you can see, in a side by side comparison, that the top edge of the blue boxes both line up. So even though the green box on the left is positioned lower, the static property on the blue box ensures that it is placed as if the green box was positioned normally. As far as the fixed background goes, it can be done one of several ways, depending on the effect you'd like to achieve. Since I can't read your mind, at least not yet anyway but I'm working on it, I would suggest looking more into the <code>background</code> property — more specifically <code>background-attachment</code>. As an example though, if you'd like the background to be for the entire page you can just define it in the html or body tags like so: <code>body {     background: url(path/to/your/image.jpg) no-repeat fixed top left; }</code> Another option would be to put the background in the containing <code>div</code> if you're using a fixed width layout. Yes, static keeps elements in the normal flow. If you look at the test page from the first example you can see, in a side by side comparison, that the top edge of the blue boxes both line up. So even though the green box on the left is positioned lower, the static property on the blue box ensures that it is placed as if the green box was positioned normally.

As far as the fixed background goes, it can be done one of several ways, depending on the effect you’d like to achieve. Since I can’t read your mind, at least not yet anyway but I’m working on it, I would suggest looking more into the background property — more specifically background-attachment.

As an example though, if you’d like the background to be for the entire page you can just define it in the html or body tags like so:

body {
    background: url(path/to/your/image.jpg) no-repeat fixed top left;
}

Another option would be to put the background in the containing div if you’re using a fixed width layout.

]]> By: Henrik http://www.screenflicker.com/blog/coding/css-tip-positioning-part-2-static-vs-fixed/#comment-20 Henrik Mon, 05 Sep 2005 16:20:48 +0000 http://www.screenflicker.com/blog/?p=23#comment-20 Hi! Nice :) Good for refreshing knowledge. I was wondering. About static - that's just normal flow, isn't it? About fixed and z-index - if you have a couple of static (flowing) blocks/boxes and you decide to put a fixed background in, using a fixed block - how do you write as to make the fixed element come to the lowest possible z index of the viewport? Since I've tried to put z-index:1; to it while giving all other * { z-index: 100; } or simply going through each block manually setting z-index: #wrapper, #content, #main, #... { z-index:100; } Any ideas? Hi!

Nice :) Good for refreshing knowledge.

I was wondering. About static - that’s just normal flow, isn’t it?

About fixed and z-index - if you have a couple of static (flowing) blocks/boxes and you decide to put a fixed background in, using a fixed block - how do you write as to make the fixed element come to the lowest possible z index of the viewport? Since I’ve tried to put z-index:1; to it while giving all other
* { z-index: 100; } or simply going through each block manually setting z-index:
#wrapper, #content, #main, #… {
z-index:100;
}

Any ideas?

]]>