[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Position model of CSS2

Topics

Common about positioning

The CSS2 has special position model. In this model position:static means ordinary positioning as if any position-related properties has not been given. The only reasonable usage of this value is exceptionally to take off the effects of other positioning values. Other positioning types (relative, absolute and fixed) gives the possibility to create layered elements. Positioned elements establish also a new containing block for the subsequent layout.

In order to control the stack level of layered elements it is necessary to use the z-index property. How bigger the numeric value is, the higher level the element is compare to other element, which have also z-index or don't have at all it (element, which have z-index:3 is positioned higher than element, which have z-index:1 and so on; if layered elements are inside a positioned element, z-index values are relative to each others and relative to other elements they have the z-index the same value as their parent element).

W3C: CSS2: 9 How to put CSS into Web pages[Pw], 10 How to put CSS into Web pages details[Pw]

When elements have position:relative the positions of elements have been calculated from the normal (static) positions of the elements. The most used positioning type is position:absolute. The positions of at this way positioned elements are normally calculated according to the the initial containing block, which is the root element. Concerning relative and absolute positioned elements the positions of positioned ancestor elements have impact for elements, which has these positioning types because the calculation of positions starts from the nearest positioned ancestor element. That's why absolute positioned elements are not each time positioned according to the root element. The positions of absolute positioned element should calculate from the padding edges of the container element when the margin and border properties of the container block have effects to the positions but the padding property is ignored.

Elements, which have position:fixed have been positioned according to the viewport (window). Because fixed positioned element has always the same starting-point depart from other positioning types positions of other elements have no impact to the positions of fixed positioned elements. Fixed positioned elements which are descendants of fixed positioned elements start always the calculation of the positioning of the subsequent layout from the very beginning.

Absolute and fixed positioned element are entirely taken off from the normal flow of elements. That's why width and height values for absolute/ fixed positioned descendants of static positioned ancestors don't change the height and width of the static positioned ancestors. The dimensions of absolute/ fixed positioned element can't be set (by using percentage values) on the basis of the dimensions of the static positioned parent element.

<body>
<div style="position:static"><div style="position:absolute; height:500px; width:500px; top:0; left:0"</div></div>

<!-- the height of the static positioned element is zero --> <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0"</div></div>
<!-- the height and width values of the absolute positioned element should be in this case calculated on the base of the HTML element --> -->

Absolute positioned elements

Below is an example of a typical usage of absolute positioned elements ([M][S][Pw]):

...
html, body {margin:0; padding:0; border-width:0}
...

<DIV style="position:absolute; top:10px; left:10px; z-index:5; width:400px;">

... </DIV>
<IMG src="./Taulut/koneet.gif" style="position:absolute; left:20px; top:50px; z-index:3">
<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; left:100px; top:20px;z-index:4">
<DIV style="position:absolute; top:290px; left:10px; z-index:5; width:400px;">
<DIV style="border:1px solid black; padding: 5px">...

...</DIV></DIV>

My recommendations:

  1. Positions have always been calculated from the top-left corner of the Web-page by using left and right properties. Both previos mentioned properties have always been set.

  2. The property z-index has been set for every positioned elements layer and if necessary also for the other elements.

  3. For container elements and for the element BODY properties margin-top, margin-left, padding-top, padding-left, border-left-width and border-top-width has been set to zero. Using of padding-right etc. leaves dimension problems[S]. The best result can be achieved if borders etc. have been set only for non-positioned descendants of positioned ancestors.

  4. Positioned elements have always pixel defined height and width properties, which have set so so that possible contents always fit inside positioned elements without setting the overflow property.

  5. Position:absolute works most reliable if it is given to direct child-elements of the BODY element. If nested positioned elements have been user inner element should fit inside outer elements.

  6. Absolute positioned elements should not be used in pages, which are horizontally scalable at the way that the content below might become unreadable.

  7. Avoid to set any element above form control elements and embedded visual objects.

  8. Don't position table cells.

Browser-specific notes concering absolute positioned elements:

  1. According to Opera Software nested solutions (for example <div style="position:absolute; top:50px;left:50px"> ... <div style="position:absolute; top:20px;left:20px"> ... </div></div>) work in MS IE 5.0 incorrectly.

    Indeed I coudn't verify this claim concerning Windows browsers. Instead I found that MS IE 5.x for Mac takes incorrectly account margins for the non-positioned ancestor element(s). I found also that Opera 4.x-5.x calculate sometimes nested positioned elements incorrectly ignoring positions of outer positioned elements when positions of inner positioned elements have been calculated. Concerning Opera 6.x I found that position:absolute + nested relative positioned elements positioning didn't work for innest elements.

  2. The bottom property works incorrectly in all browsers. If any containing block has not been set browsers position the element in the bottom of the viewport in a situation, where the page has not been scrolled. right doesn't work at all in all position:absolute supporting browsers.

  3. In MS IE 4.x for Windows positioning doesn't work if the starting point of the positioned element is totally outside of the positioned container element.

  1. Browsers set the width and height differently if they are undefined. In some Opera 7.x browsers the width and height are zero, if they are not explicit defined. Menus might be collapsed.

  2. MS IE 5.x for Mac and Mozilla Gecko browsers can't position table cells.

  3. With percentage values defined width and height properties don't work correctly in MS IE and Opera browsers. MS IE calculates positioned elements on the base of parent element even if the parent element is static positioned. If the parent element has not exact height value, the value is the height of one row of text. Opera takes the height from static positioned parent element (if the parent element doesn't have the height property the height would be the height of the viewport subtracted the space, which Opera reserves for the vertical scrollbar). Opera 7.x calculates the width correctly from the base of the HTML element but other according to the viewport in situations, which resemble example below:

    html {width:400px; width:400px}...
    <body>
    <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0; background-color:yellow"</div></div>
  1. Only Mozilla Gecko browsers calculate positions according to the padding edges of the HTML element. MS IE 5.x+ and Opera 7.0 Beta 1 for Windows browsers ignore the margin. MS IE 5.x for Mac takes sometimes account paddings for the HTML element. Older Opera browsers ignore both margin and borders like MS IE 4.x for Windows (the latter browser ignores totally these properties). I made a test case[S] for it. In ordinary situations Opera 4.x-6.x calculates positioned elements incorretly according to the border edges.

  2. According to an e-mail MS IE 5.0 for Mac starts in some cases calculating from BODY element. In a case padding-left:100px for the BODY element moved the absolute positioned element 100px to the right (a test page[S], where the menu should be on the top-left edge of the page).

  1. Opera needs both horizontal and vertical values of them (MS IE use as the default value the top-left edge of the element).

  2. MS IE 5.x+ for Windows (except MS IE 6.0 in the standard-compliant mode[S]) needs height values for TD elements, which are inside positioned elements. Mozilla Gecko browsers need in some cases the height property for positioned DIV elements. MS IE 4.x for Windows seems to need for positioned elements always both height and width properties.

  3. The positioning doesn't always work in Netscape 4.x browsers. In these kinds of situations it is necessary to define corresponding HTML-attributes for LAYER or ILAYER elements (look at an example from the page, which handles dynamic menus[S]). If positioned elements are inside cells of full width tables all properties for positioned elements don't work correctly.

  4. The problem in almost all new browsers is that the z-index doesn't work properly with embedded plug-ins object and/or with form control elements. In in Opera (until 6.x series) this problem concerns both of them and in Konqueror 3.1 form control elements. MS IE has problem with the SELECT-element. These broblems have almost been fixed in newest Mozilla Gecko based browsers. Indeed if layers, which have been set above an embedded object have background-color:transparent the background-color of the parent element of the embedded object shines through and layers crop a piece from the embedded object.

  5. All CSS2 supporting browsers don't support all values for the overflow property. I mention this problem further, when I handle position:fixed related issues.


[Top]