Re-introducing CSS positioning

  1. Static
  2. Relative
  3. Fixed
  4. Absolute
  5. Absolute in the positioned ancestor
  6. Read more

CSS positioning becomes very important in building graphical components.

In this section we remember it and use in widgets.

Static

The default positioning type, used if no other position is set explicitly.

For this and future examples the document below is used.

<style> /* basic style */
.widget { 
  background-color: #ffe4c4;   
  width: 500px;
}

#today-header {
  background-color: #5f9ea0;
  margin: 0;
}
</style>


<h1>Static positioning</h1>

<div class="widget">
    The widget header.

    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

An element with position: static is also called an not positioned element, with any other positioning type - a positioned element.

Relative

An element can be positioned relatively to it’s normal place.

To use relative positioning, you need to define position: relative CSS property and probably one or two coordinates:

  • top/bottom
  • left/right

Usually you choose one from the vertical pair and one from the horizontal pair.

The element will be shifted from it’s usual position by given distance.

Check the code below for the example below for that.

<style> /* basic style */
.widget { 
  background-color: #ffe4c4;   
  width: 500px;
}

#today-header {
  background-color: #5f9ea0;
  margin: 0;
}
</style>

<style>
*!*
  .widget{
    position: relative;
    left: 30px; 
    top: -30px;
  }
*/!*
</style>


<h1>Relative positioning</h1> 

<div class="*!*widget*/!*">
    The widget header.

    
    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

As you may see running the example above, the element is shifted:

  • left: 30px: moved 30px from it default left.
  • top: -30px: if it were just “30px”, then element would go down 30px from it’s default top, but because the value is negative, it goes 30px up.

These left/top properties wouldn’t work for position:static.

position: relative moves the element, but the place which it occupied, remains empty.

In the example above, the the footer does not shift up to occupy the freed space.

Fixed

This type positioning is not supported in IE<8 and emulated using behaviors.

It does two things:

  1. Removes the element from it’s place. Other elements shift to take places as if the element did not exist.
  2. Moves the element relative to window. That really means a window, not document. When the page is scrolled, the fixed element will remain at it the same coordinates.

In the example below, the page is scrollable, but #go-top link is always at the same place (in IE<8 expressions are used for that).

<style>
*!* 
  #go-top {
    position: fixed;
    right: 10px;
    top: 10px;
    font-size: 125%;
  }
*/!*
</style>

*!*<a href="#top" id="go-top">Scroll, I don't move!</a>*/!*


<h1 id="top">Fixed positioning</h1>
    The widget header.

<div class="widget">
    
    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>

   <p>SquirrelFish is a register-based, direct-threaded, high-level bytecode engine, with a sliding register window calling convention. It lazily generates bytecodes from a syntax tree, using a simple one-pass compiler with built-in copy propagation.</p>

</div>

The footer.

Absolute

The absolute positioning is the most important.

It does two things:

  1. Removes the element from it’s place. Other elements shift to take places as if the element did not exist.
  2. Moves the element relative to it’s closest positioned parent, or the document if no such parent is found.

The closed positioned parent is nearest parent which has position other than static.

The example below positions a widget absolutely. Because there is no positioned parent, the widget moves to the document right-bottom corner.

<style>
  @import url(/files/tutorial/browser/dom/poscolor.css)
</style>

<style>
*!*
  .widget{
    border: 1px solid black;
    position: absolute;
    right: 0;
    bottom: 0;
  }
*/!*
</style>


<h1>Absolute positioning</h1>

<div class="*!*widget*/!*">
    The widget header.

    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

Also note that the widget element is removed from the stream, so “The footer” shifted to it’s former place.

Absolute in the positioned ancestor

Let’s say we need to position a header in the right-top corner of the widget. The absolute positioning helps here:

<style>
  @import url(/files/tutorial/browser/dom/poscolor.css)
</style>

<style>
*!*
  .widget{
    position: relative;
  }
  #today-header {
    position: absolute;
    right: 0px;
    top: 0px;
  }
*/!*
</style>


# Absolute positioning   

<div class="*!*widget*/!*">
    The widget header.

    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

In the example above, #today-header is positioned absolutely in the right-top corner of the closest positioned parent… Which is .widget, because it has other position than static.

The trick with setting position:relative without a shift is a general way to make an element positioned, so that inner elements can be positioned absolute to it.

The #today-header is removed from the stream so other elements are shifted to occupy a freed place.

Sometimes that’s fairly ok, but if you need to keep the place - it us usually done with paddings or other types of additional styling.

We’ve got the Text, Question and the Button:

Use JavaScript and CSS to move the Button under the Question:

  1. First, to the left:
  2. Second, to the right:

The text should be overlapped, as if the button were a sliding menu.

The source code is here: tutorial/browser/dom/position/source.html

Open solution
Solution

The solution is to:

  1. Use relative positioning on the question.
  2. Use absolute positioning on button, append it to the question.
  3. Add background-color to the button so it will overlap text.
  4. Use buttonElem.style.right=0 for the right side.

Left: tutorial/browser/dom/position/left.html.
Right: tutorial/browser/dom/position/right.html.

Note that the button does not inherit yellow background, because it is positioned absolutely and, speaking in terms of CSS is out of normal flow.

Read more

CSS Positioning is well-described in the specification Visual Formatting Model, 9.3 and below.

Also, there is a tutorial CSS Positioning in 10 steps, which covers main position types and floats.

Tutorial

Donate

Donate to this project