Maximizing and Restoring HTML Images: Layer Method

The image has the onclick event, which calls a JavaScript function. There is a global variable in the JavaScript, which indicates whether or not the image is maximized. The function uses this variable to change the dimensions and the layer of the image by changing the CSS properties. Layering simply means that one HTML element can appear in front of another, covering fully or partially the one behind it. However, many browsers do not handle layering the way it is specified by the W3C.

Limitations and Behavior of Browsers concerning Layering

Before I continue, let me tell you how browsers today handle layering as it concerns our project. There is a CSS property called “z-index.” The value of the z-index is an integer. An element with a higher z-index appears in front of an element with a lower z-index. Browsers today handle this property in this way, which is fine. 

The CSS position property determines the left (Cartesian x) and top (Cartesian y) of an HTML element. The z-index property only works when you give the HTML element a CSS position property. Today’s browsers handle this feature in this way, which is fine. 

Here is where browsers show their limitation and weaknesses. The position property can be as follows: “position:static,” “position:relative,” “position:absolute” and “position:fixed.” The value that interests us here is “absolute.” To save time I will not explain in detail the other three values. Know that browsers today handle the “static” and “relative” values as they should. Many browsers do not handle the “fixed” value; that is a limitation. With “position:relative,” the element appears relative to where it should appear in the normal flow.

With the value “absolute,” the position of the element is supposed to occur with respect to the top-left position of the containing element (e.g. DIV element). However, browsers that I know display the element with respect to the top-left corner of the client area of the web page -- a weakness.

If you give an element the CSS property “position:absolute,” and you do not give the element any CSS Left and Top property, the element will appear where (on the x,y coordinates) you placed it in the normal flow of the page. This is a behavior of browsers today that we shall exploit.

Another weakness: when you do this, the position may not be exactly what you want. It may have a vertically downward displacement.