Screenflicker

home

CSS Tip: Positioning Part 2 - Static vs Fixed

05 Sep 2005

Continuing on from my previous post on the CSS position property I would like to examine position: static and position: fixed. I will be using the same CSS as in the previous post, with a slight change to allow for scrolling (noted in bold).

.container {
    width: 200px;
    margin: 5px;
    padding: 5px;
    min-height: 900px;
    height: 900px;
    background-color: #D5C1C1;
    display: block;
}
        
.box1 {
    width: 100px;
    margin: 0;
    padding: 0;
    background-color: #00571F;
    display: block;
}
        
.box2 {
    width: auto;
    margin: 2px;
    padding: 2px;
    min-height: 300px;
    height: 300px;
    background-color: #697DCD;
    display: block;
}

Box 1

Box 2

Static

The position: static property places the element in question within the normal flow of the document but doesn't require that you specify top or left properties. That seems pretty straight forward. This essentially performs the same function as the position: relative; with no definition for top or left.

The slightly more experienced among you are probably saying to yourselves, "yeah, and?" It does seem a bit redundant but if you want to code strictly to the W3C specs or just code each property as it was created to do, this is important to know. Most people would probably use the position: relative property incorrectly by not specifying the top or left properties.

By using the position: static property you can acheive the same result and maintain a strict adherence to the properties intended use. So if we use the code below:

.container {
    width: 200px;
    margin: 5px;
    padding: 5px;
    min-height: 900px;
    height: 900px;
    background-color: #D5C1C1;
}
        
.box1 {
    margin: 0;
    padding: 2px;
    background-color: #00571F;
}
        
.box2 {
    position: static;
    width: auto;
    margin: 0;
    padding: 2px;
    min-height: 300px;
    height: 300px;
    background-color: #697DCD;
}

We end up with this. I've included an example that shows box 1 using both position: relative and no position to show how the staticly positioned box 2 stays within the normal flow of the document.

Fixed

The fixed property is similar to the absolute property in that fixed elements are positioned outside of the normal flow of elements. The fact that it is fixed modifies the behaviour slightly so that it is "fixed" in the viewport (or to the page when printed). What this allows you to do is specify a block that is stationary, to the top/bottom/left/right, in relation to the container or screen.

By using the code below you will end up with one box being fixed within it's container because the top and left properties are not specified.

.container {
  width: 200px;
  margin: 5px;
  padding: 5px;
  min-height: 900px;
  height: 900px;
  background-color: #D5C1C1;
  float: left;
}
  
.box1 {
  margin: 0;
  padding: 2px;
  background-color: #00571F;
}
  
.box2 {
  position: fixed;
  width: auto;
  margin: 0;
  padding: 2px;
  min-height: 300px;
  height: 300px;
  background-color: #697DCD;
}

And this is the result.

By specifying a top or left value after the position property the fixed element behaves even more like an absolutely positioned element. Some might consider that by adding the position: relative to the parent element all the children would be contained. That's not the case though. Adding position to the parent element does not contain a fixed position element.

There are also a couple of little quirks to note when dealing with fixed positioning. The first is that elements that have their position fixed are always brought to the front, or top layer, of the document/page. You can reposition your fixed elements by specifying the z-index property but that's another topic.

The second little quirk or interesting note is the width of fixed elements. When you fix the position of a particular block it automatically shrinks the block to the content. This is, of course, when you don't specify the width or when you set it to auto. This can be overcome by specifying a width in the fixed element or block.

Next...

In the next installment of this series I'd like to compare positioning vs floating in more detail.

comments powered by Disqus