Absolute Positioning

Introduction:

 

Where do we start? Well if we follow the advice of our wise old ancestors we should ‘start at the beginning’.  This book starts somewhere in the middle.  Well, that may be a good place to start if you have some knowledge of what went before and have some understanding of the direction in which you want to head. 

Since you have picked up this book to read, we must assume that you do know what went before and what is to come after.  Nevertheless, we must begin at the beginning if we want to identify and root out misconceptions about web design.  Else we may find ourselves in difficulties.  We may not understand or appreciate the problems of positioning elements and the throes of positioning them absolutely.  So following the dictums of the ancestors we shall begin at the beginning.

The web page is a derivative of the physical paper. However, it does not suffer from the limitations of a physical paper.  Using paper is all about control.  Its size is fixed.  Its fonts cannot be fixed by the reader.  It will remain same at the point of creation and at the point of distribution.  The reader has no option but to accept what he gets!

The web page is different. Its dimensions can be changed.  The fonts can be changed; the look and feel can be changed.  It is dynamic and pliable and fully capable of adapting itself to the visualization of the web designer.  It can be customized to the needs of the user. It can be made accessible to the blind reader or cater to those who can see and hear.  Software can be made to read the page for the visually impaired or adapt itself to Braille for those who read with the fingers.  The presentation is only limited by the vision of the programmer and determined by the needs of the user.  

Unfortunately, the web page seems to have broken all bounds and become uncontrollable.  The designer cannot ensure that the web page remains the same at the point of creation and distribution! It takes on the shape of the window in which it is displayed and distorts the positioning of the elements that the designer so carefully laid out on the page!

The chameleon like quality of the web page has exercised the minds of the web designer and the end user alike. It is a common plaintive theme that can be found in web design discussion forums and books that have been churned out on web design.  The novice and the experienced, cry hoarse over the problem of control in web pages.

“How do we control the look and feel of the web page in multitude of browsers and desktop resolutions?�

“How do we ensure that the elements are positioned as designed in the final output that appears before the user?�

The web designer must acknowledge the sad fact that he has no control over the display of his page. The reality he encounters is a far call from the ideal that he wants! He can at best attempt to direct the user experience.  He will have to second guess the platform differences and resolution logic.  He will have to try to render every page pixel perfect. 

Therefore, before we start on this book about absolute positioning it is important to understand that positioning of elements is a challenge and absolute positioning of elements is an absolute challenge.

The designer is not God.  He needs to rethink his role, to abandon control and seek a relationship with the page that has nothing to do with the “what we see is what we get (WYSIWYG)� world. He must accept that he needs to create adaptable pages in which content and appearance are two distinct elements. He must appreciate that it is the nature of the web to be flexible. So he must begin the journey by letting go of concepts of control of web pages and accepting that flexibility is the first mantra web design.

If the dreams of a killer website have taken a beating, it is time to say that you have no cause to despair.  Killer web pages have been created and continue to be created despite thes problems.  However, concerted efforts are being made to discipline the web page.  You may soon find that you have tools which enable you create web pages that look the same and display the same whatever the browser, the platform or the device!

Microsoft, Netscape and Opera have rallied forces to deliver standard compliant browsers.  While these standards do not provide you with complete control they at least help you create web pages that look fairly good on desktops and palmtops alike.  The expectation is that you separate structure from presentation using semantic XHTML and CSS layout and do not get carried away with false convictions that backward compatibility with older browsers is a possibility.  The web designer must understand that bygones will be bygones and they must let go of those browsers and push the new ones that are taming the world of web design for him. 

Now that the decks have been cleared of all misconceptions you are really ready to get started.  So let me tell you what this book is all about.

This book is about web designing as you have guessed.  It is also about the problem of control.  It is about positioning elements and advantages of absolutely positioning them.  It is all about the challenge you are about to take up and the truths you are going to be forced to accept.  So if you are ready, turn the page and begin your journey of discovery.

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!

Layers and Positioning of Elements

A layer is a type of container.  It can hold text, images, tables and other layers. While layers are extremely difficult to hardcode and a number of browsers do not support layers, they can be used to an advantage for obtaining text and image effects and for the creation of web sites that are creative.  The web designer can also have immense versatility in the positioning of elements on a page.  A number of software, like Dreamweaver have provided designers with tools for creation of layers with ease. 

Using Layers to Position Elements.

Coordinates and positioning are two important attributes of the layer that have to be considered the moment the web designer works on his composition.   The coordinate system x/y begins with the top right corner of the page.  Layers can be stacked or overlapped in the order supplied by the third coordinate called the z-index, which is used by the web browser to determine the topmost layer of the stack.  Positioning of elements on a layer is similar to positioning of elements on the web page—static, relative and absolute. Static positions, as we have already stated, treat the image or text like a block in the normal flow.  Relative positioning places the element with reference to the top left corner of the document.  Absolute positioning takes the layer and the elements on it away from the normal flow and places them in coordinates of their own.  They are not affected by the contents of the page.

Attributes and Positions

An HTML attribute or a style property is called a parameter in web design parlance.  For instance, the ID parameter means either an ID attribute that can used with the <LAYER> tag or the ID Style property.  However, property means Style property. 

The <LAYER> tag takes on pixels as the unit of measurement for attributes that specify the distance.  Style properties are generally numerical values.

The Position property only applies to layers that have been defined as styles and its value can be absolute or relative.

ID is an identity for the layer and must begin with an alphabet.  The ID can be used to refer to the layer in the code.  This is an optional attribute.

The Left and Top parameters are used to specify the horizontal and vertical positions of the top-left corner of the containing layer or page.  The value has to be an integer.

PageX and PageY properties are sometimes used to specify the horizontal and vertical positions in pixels of the top left corner of the layer relative to the enclosing document if there is no equivalent style property specified with the <layer> tag. 

The SRC and Source –include style attribute are used to specify the HTML document that needs to be displayed in a specific layer.  This source file can include JavaScript code and all layers in the source file will be treated as child layers.  This technique is useful if the content has to be dynamically changed constantly.

The chef doesn't have to rewrite the entire page just to update the information about the special of the day.

The Width parameter is used when the layer’s contents have to warp to fit within the layer. An integer value is normally used but percentages can also be ascribed. However if the layer contain images which cannot be warped the layer will ignore the width property and expand automatically to accommodate the width of the image.  By default it will warp at the right boundary of the containing layer.

The height parameter defines the initial height of the clipping region of the layer.  This is expressed as an integer value or a percentage of the height of the containing layer. Like the width property, the height will also expand to accommodate elements which cannot be warped. By default the height is the minimum height for all the contents of the layer.

The Clip property defines the clipping rectangle—that is the visible boundaries of the layer. It takes the top, left, right and bottom values as pixels.  The left and right values are pixels with reference to the left edge of the rectangle and the top and bottom are defined with reference to the top edge of the layer itself.  If the right and bottom values are specified the other two values will default to zero. If no value is specified, the values of the width and height will be determined by the contents of the layer.

Z-Index, above and below are three attributes used by the <LAYER> tag for defining the stacking order of the layers.  Values specified in these attributes will override default values.  The topmost layer will have the highest z-index value. The Above attribute refers to the layer above the referenced layer and the below attribute refers to the layer immediately below the referenced layer.  All nested layers are stacked above the parent layer. 

The visibility attribute will determine the visibility or invisibility of the layer. Pop up menus are examples of setting visibility attributes to layers.  All submenus are created as invisible layers and they pop up on mouse-over events. HIDE hides the layer and INHERIT causes the layer to have the same visibility as the parent layer. This is also the default value. A layer with a visibility set to show may not be visible if there are other layers with the visibility set to show above it. 

By default layers are transparent. The BG-Color and Background-color can be specified to define the color of the layer.   The Background color will be applied to the rectangular region occupied by the layer. If a border is defined in the Style the region will be enclosed with a border in the color specified for the border.  

The Background and Background-image style properties assign a tiled image across the background of the layer. The value specified is the URL of the image.  

OnMouseOver and OnMouseOut, OnFocus, OnLoad, event handlers are functions or inline JavaScript code that can be invoked to make visible or invisible layers. 

Finally the NoLayer tag displays the content as if was not positioned at all.  If layers functionality is required, it will generate JavaScript errors. 

Layers can contain applets and plugins which are special windowed elements that float on top of all layers—even when the containing layer is not visible.  If these elements are moved to the edge of the containing layer they will disappear completely or partially(as in the case of form elements). 

Examples of Layer Positions

Relative Positioning and Layers:

Relatively positioned layers form part of the normal flow of the web page.  These are also known as Inflow layers.  These layers occupy space in the document flow and share line space with other elements of the web page.   The left and top attributes or properties can be set to specify the offset of the layer’s top-left corner from the current position of the document. The <ILAYER></ILAYER> tag is used while specifying an inflow layer.

<ILAYER ID=layer2>
 <P>Sample content for relatively positioned layer</P>
</ILAYER>
<STYLE type="text/css">
<!--
#layer2 {position:relative; }
-->
</STYLE>

In the following code relative position has been used to determine the positioning of layers:
<html>
<body>

Sample ON TOP:

<div style="position:relative; font-size:50px; z-index:2;">Sample</div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">Sampleagain</div>
Sampleagain ON TOP:<div style="position:relative; font-size:50px; z-index:3;">Sample </div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">Sampleagain</div>

</body>

</html>

The web page will look as under:

Absolute Positioning and Layers: 

Absolutely positioned layers can be defined with reference to its coordinates within its containing layer. The top, left corner of the layer can be set using the left and top attributes or properties. However, if these attributes are not set they will default to the top and left of the containing layer automatically.

The absolutely positioned layer will not occupy space in the normal flow and will have no impact on the other elements on the page within the normal flow.  The other elements on the page too will not make space for the absolutely positioned element in the normal flow.

An absolutely positioned layer is created using the <LAYER> </LAYER> tag. If the layer has been defined as a style the layer will have to be created as under:

<LAYER ID=layer1 TOP=200 LEFT=260>
 <P>Sample layer content</P>
</LAYER>
<STYLE type="text/css">
<!--
#layer1 {position:absolute; top:200px; left:260px;}
-->
</STYLE>

If the position is defined as Absolute in the example given for relative positioning, the web page will appear as under:

Note that the top layer has been defined using the z-index attribute in both instances cited above.
 
Layers can be positioned relatively absolute or absolutely relative. In other words the position of the layer can be calculated with reference to the upper left corner (the absolute) or from the position of the layer within which the layer has been placed(relative). 

Negative and positive values are acceptable while positioning layers. The positions can also be changed dynamically using JavaScript.  This opens up immense possibilities.  Whole games can be designed using layers with coordinates and positions defined. Or layers of pages can be created in a stack and clicking on a link can move the specified layer to the top.  

Layer problems

The most irritating problem about absolutely positioned layers is overlapping text. The moment a user resizes his text, all the beautiful layering done by the web designer takes a toss!  The text begins to overlap. While Gecko browsers will allow the text to overflow, IE will expand the layers and overlap the borders of the layers too! The second layer will not move down to accommodate the first one as both are absolutely positioned and are not affected by the changes in the position of other elements! 

Another common problem with layers is that they will not stay put where the designer intended them to stay!  If the layer is designed to be 800 pixel wide and the user has a screen that is 1024 pixel wide the layer will appear to jump a little to the left. While the actual layer has not moved a single pixel, it appears to move because it is absolutely positioned!  In reality it is the table that has moved to the right to remain perfectly centered on the page. Since we do not have control over the user’s resolutions, it may be a good idea not to use absolute positioning? Maybe static positioning would server your ends better? Or maybe you could try setting margin and padding properties to resolve the issue?  

In a sense setting the Margin and padding would solve the problem.  Well ….Almost. The <div> containing the first layer will expand to accommodate the text if the font size is changed and the second layer will move to accommodate the changes in the first layer—rendering the layers correctly. The padding will take care of the space around the border and ensure that the text does not stick to the borders.  A wrapper <div> can be used to enable the text to retain its positions relative to each other and the wrapper can be centered while the text remains at a specified position from the left of the browser viewport. 

Once all the above has been taken care of the designer will still have to deal with Browser bugs.  Width is part of the content area. Any margin and padding added is included in the width in the determination of the area occupied by the element.  Old Browsers do not recognize the box model which describes the width.  Internet Explorer will calculate the width property and subtract the padding and borders before rendering the page. Well, you can imagine what will happen to all the positioning you have done when IE renders the page!

To accommodate this bug in IE it has been suggested that web designers should ensure that the browser renders the page in Standards mode rather than in the quirks mode by including a Doctype in the page.  The designer will also have to take care of the problems of IE 5x.  A number of CSS hacks exist that can filter styles. These can be used or you could use a specific type of code that is called conditional comment.  A code like the one under will be offered to IE 5x.

   <!--[if IE 5]>
   <style type="text/css">
   #smpl1, #smpl2{width: 200px;}
   </style>
   <![endif]-->

This code can be placed in <head> of the document after other styles or link to an external style sheet.  While IE 5x will act on it, other Browsers will ignore it.

Stacking layers