Chap 05

Absolute Positioning? Absolutely Not!

Absolute Positioning? Absolutely not! This reaction to the process of absolutely positioning elements on a web page is understandable but not justified.  Why ever not?  Absolute positioning provides the designer with certain advantages and a quite a few disadvantages too. However, before we actually set out the long list of advantages and disadvantages, let us look at the concept of absolute positioning.

Defining Concepts

Absolute positioning defines the x and y coordinates of an element with reference to the top left corner of the browser page or the containing block and the position attribute is set to absolute.  The code will read as under:

<STYLE TYPE= “text/css”>
<! –
P{position: absolute; left 50 pt; top:30pt}
</STYLE>

Note that the right and bottom coordinates have not been defined. So the text moves to the right and the bottom of the page.  Specifying all four coordinates will give you greater control over the element. 

Absolute positioning removes the element from the normal flow of the document and it does not impact the other elements on the page when the page is loaded.  This means that the element is placed in an arbitrary position somewhere in the viewport and its properties are set by the top, bottom, left and right attributes.

A point that needs to be noted here is that if the absolutely positioned element is a child element of another element which has not been placed static, then the absolutely placed element will not be placed relative to the viewport, but relative to the parent box.  In the following code three boxes have been specified.  When the code is executed, box one will be placed relative to the view port.  Box two will be placed absolutely and box three as the child of box two will be placed relative to box two.

#one {
 position: absolute;
 top: 1em;
 left: 1em;
}
#two {
 position: absolute;
 top: 3em;
 left: 2em;
}
#three {
 position: absolute;
 top: 0.5em;
 left: 0.5em;
}
<P ID="one">This is box one.</P>
<DIV ID="two">
 <P>This is box two.</P>
 <P ID="three">This is box three, which is also inside box two.</P>
</DIV>

One common use of absolute positioning is for creating columnar layouts for the web pages. You would probably create two Div ID to represent the columns and define a block of text within each <Div>. This can also be achieved by defining the following style sheet.

 #columns {
 position: relative;
 top: 0;
 right: 0;
 padding-right: 10em;
}
#right {
 position: absolute;
 top: 0;
 right: 0;
 width: 9em;
} 
In this code we have set the position of the container to relative and the position of the boxes absolute with reference to the container. A right padding of 10em is included to make the necessary room for the box.  Margins are not set.  The width of the element is inside its margin and contains the padding.  If the margin is set it will to the right of the text and the positioned box!

The user agent or the application that processes the web page such as the browser selects the initial containing block. It also could be related to the veiwport. 

It is ok to assign negative values to the absolutely positioned elements.  However, this may result in non-display of the element.

Layers can be used to absolutely position elements on a page.  Layers are created using the div tag as in the following code:

It is possible to position the layer and also define its dimensions. However, the latter is optional. Absolute positioning can use absolute (px) and relative (%) units of measurement.

The advantage of using layers with div tags is that they load faster.  All the style information is contained in the attributes added. The overlapping layers can be created using the z-index command.  The values assigned to the z index will determine its order in the stack.  The higher the index the closer the div will appear to the front of the page.  The layer that holds the page’s content should be given the z index of one so that users can read the content and click on the navigation elements.

Absolute positioning gives complete control over the elements of a web page to you.  Once the element is pulled out of the flow it can be placed anywhere in the page and this will allow you the freedom to display your content before your navigation structures become visible. This enables you to provide the user with optimum accessibility and to optimize your content for search engines.

However, absolute positioning can cause problems of overlapping if adequate care is not exercised.  Layouts that use absolute positioning for columns can have problems with footer display if the column length is not correctly estimated.

Comparing Concepts

Most users are confused between absolute and relative positioning concepts in CSS.  This is because of the coordinate system within which the block is placed.  The block then depends on the positioning context and there is no universal set of coordinates to guide the designer.  Whenever a new block is placed on the page it creates a positioning contexts for its descendents with reference to the upper left hand corner of the page. It another element is placed within the first element, its position will be calculated with reference to the top left corner of the containing block and not the page.  The code fragment below will place an absolutely positioned element with reference to the top left corner of the page.

If a second div is placed within the first one as in the code under, the positioning context will indent the second line 25px from the first as the positioning context determines the position of the second element within the first one.

The font size will also be larger as the second line is treated as the child of the first element and its font size is calculated relative to the first element.

If a third element is added using the relative positioning, it will be contained within the second element. Relative positioning will render the text slightly to the right of the second element within the span.  This is because it calculates the position with reference to the original position on the page.

:<div class="firstDiv"
     style="position:absolute; left:125px; top:75px;">
  This text is being absolutely positioned with reference to the page.
  <div class="firstDiv"
       style="position:absolute; left:25px; top:30px;">
    This is<span style="position:relative; left:10px;
top:30px;">relative positions example</span> is contained within the second line.
  </div>
</div>

In short the absolutely positioned elements are placed relative to the positioning context in which they are located while relatively positioned elements create their own positioning context based on their original location.

Combining Concepts

Absolute positioning is relative!   In reality an absolutely positioned element is relative to the containing block.  The containing block is the nearest positioned ancestor or the document’s initial containing block.  It is a structurally superior element whose property is absolute or fixed or relative.  The following example shows how an absolutely positioned element can be relative to the containing block. The H3  positioned as relative allows the span to be positioned relative to the containing header.

h3 {
  position: relative; / So that elements INSIDE this header can be positioned relative to the header /
}

h3 span {
  position: absolute;
  display: block; / So we can give the element a width /
  top: 3px;
  right: 3px;
  width: 10px;
}

<h3>Some header <span>!!!</span></h3>

Parent child relationships affect absolute positioning.  The position of the child element is determined in relation to the parent element.  The contained element’s absolute position will be referenced in relation to the upper left corner of the <div> element.

A relative element can be nested in an absolute element.  The relative element will be treated as a child of the absolute element and its position on the page will be determined in the context of the parent’s position on the page.  The relative element is moved to its original position in the flow within the parent element. The code for this will read as under:

.relpos { position: relative;
            left: 150px
           }

The markup of the second page will read as under:

<div class="relpos">
<img src="horse1.jpg" alt="Horsie" />
</div>

An absolute element can also be nested within a relative element.  The relatively positioned element is the parent and the absolutely positioned element is the child.  It positioned will be determined with reference to the coordinates within the relatively positioned element. The absolutely positioned element will move if the relatively positioned element is moved.   The css code will read as under:

.relposx { position: relative;
              top: 270px;
              left: 0px;
              border: teal thick groove
             }

The code for the absolutely positioned element will read as under:

.abposx { position: absolute;
              top: 0px;
              left: 150px;
              z-index: 0
             }

z Index Property and Positioning—Absolute/Relative

CSS allows overlay of elements to create a 3D effect.  The elements can be absolutely positioned in such a way that they are positioned in overlapping layers. A stacking happens and the z index order value is used to position the layer in the stack and consequently the image or text.  The code below is illustrative of this technique. It positions one image slightly above the other.

As indicated in the opening sentence, many programmers feel that Absolute positioning should not be encouraged for web page design.  Their contention is that absolutely positioned elements on a web page make for rigidity in design and can cause display problems when they are executed in different browsers and computers with different resolutions.  One solution could be that we create different style sheets for different resolutions and take advantage of the strengths of using absolute positioning of elements in a web page.  As I said earlier, the design of the web page is only limited by the imagination of the designer and the tools he brings into play in the creation of his art.  Scripting languages and object oriented programming techniques are coming up with a number of useful methods of designing and controlling the elements of the web page.  Why not take advantage of them?  Why complain about the problems of absolutely positioning elements?  I would say yes to absolute positioning provided it is used skillfully and effectively by the designer!