Using Absolute Positioning

Overview

Cascading style sheet (CSS) features allow HTML elements to be absolutely positioned on a page, independent of their position within the HTML stream. An absolutely positioned HTML element has its CSS POSITION style attribute set to absolute instead of static.

An absolute style removes an element from the normal HTML flow and positions it using the TOP and LEFT style sheet attributes that describe the position of the element in pixels from the top and left sides of the document or container. Essentially, absolute elements use an x and y pixel-based coordinate system. Absolute elements also have a Z-index, which specifies the visual order of overlapping absolute elements and how absolute elements are ordered relative to elements in the HTML stream.

Elements that are not absolutely positioned are referred to as statically positioned elements or as 1-D elements.

Absolute positioning simplifies the task of arranging HTML elements on a page; nevertheless using absolute positioning is not always appropriate. Sometimes, especially when RPG code is involved, using static elements is more fitting. The HTML code for static elements tends to be more organized than the HTML code for absolute elements, and you may prefer to use HTML tables to arrange and position static elements. Depending on the application, organizing static elements with HTML tables can even be more flexible than converting elements to absolute positioning. For example, RPGsp wizards use HTML tables to present input forms and subfile listings. You may prefer to use an external specialized tool for laying out HTML tables.

There are times, however, when using absolute positioning makes perfect sense. Absolute positioning is often used for freestanding text, logo images, RPG variables, buttons, and tables.

You can also intermingle absolute and static elements on one page. There are many different combinations. For example, an absolutely positioned table can be used to organize several static HTML elements within itself.

Some elements can be made absolute directly, while other elements, like RPG variables and Text, must be enclosed in an absolute container. An absolute container uses an absolute <DIV> tag to surround a section of HTML. The HTML enclosed within an absolute container is not limited to simple text. It can be comprised of any HTML elements, including forms, tables, buttons, images, and input controls. Absolute containers can be resized and positioned as needed on the page. To edit the contents of an absolute container, double-click it.

Here is an example of an absolute container that includes within itself a table, hyperlinks, and RPG variables. The container can be moved as a whole, and positioned using LEFT and TOP style attributes.

Creating absolute elements

The page designer provides commands for inserting absolute elements or for converting any static element into an absolute element and vice-versa.

To insert a new absolute element, simply select it from the Insert Menu or clicking on the corresponding icon in the Absolute Section of the Toolbox. The HTML code for an absolute element or the absolute element's anchor () is placed at the insertion point, while the element itself is initially positioned near the middle of the page.

To convert an existing element to an absolute element, right-click the element and select Make Absolute, or for selected text and RPG variables, choose Enclose in Absolute Style Container.

To convert an absolute element back to a static element, right-click and select Remove Absolute Attribute. Please note, for absolute containers, the <DIV> tag is not automatically removed -- only its POSITION style is changed.

Changing the Z-index

To change the order (or depth) of the selected absolutely positioned element relative to other absolute elements in its container, right-click the element and select the Z-index submenu. You will be presented with the following options:

• Bring element to front. Brings the element to the front layer so it appears on top of overlapping elements. Sets the Z-index higher than all other elements in its container.
• Send element to back. Sends the element to the back layer so that any overlapping elements appear on top of it. Sets the Z-index lower than all other elements in its container.
• Bring element forward. Moves this element in front of the element with the nearest Z-index. Increments the Z-index (and adjusts the Z-index of other elements).
• Send element backward. Moves this element behind the element with the nearest Z-index. Decrements Z-index (and adjusts the Z-index of other elements).
• Bring element above text. Changes the Z-index of the element to a positive number to put it in front of the 1-D elements and text on the page.
• Send element below text. Changes the Z-index of the element to a negative number to put it behind the 1-D elements and text on the page.

Moving absolute elements

You can move an absolutely positioned element by selecting it and dragging it to a specific position on the page. After an element has been positioned, the page designer simply updates the element's LEFT and TOP style attributes to reflect the new position.

To move an absolute RPG variable, you must drag it by its absolute container border. Otherwise, you may end up dragging the RPG variable out of the container, thus making it non-absolute.

Absolutely positioned elements can also be nudged a pixel at a time using the arrow keys.

To prevent absolute elements from being moved accidentally, they can be locked in position.

When an element is locked, inadvertent mouse movement or arrow keys will not move them, nor can they be nudged. The locked state of an element is persisted into the HTML stream by adding a DESIGN_TIME_LOCK attribute to the style of the element. This means that lock attributes will be retained, even when a document is saved and reopened.

Specifying Snap-to-Grid

The RPGsp Page Designer provides an invisible grid to aid the user in positioning absolute elements. You can toggle snap-to-grid behavior on and off as required. Absolutely positioned elements jump from cell to cell of the grid as they are dragged. Grid cell dimensions may be sized in pixel granularity. To specify Snap-to-Grid, select View -> Snap to Grid from the pull-down menu.

"No grid" moves elements 1 pixel at a time. A "50x50 grid" moves elements 50 pixels at a time.

You can automatically enable Snap-to-Grid for every opened or new page on the HTML Designer Tab of the Options Dialog.

Profound Logic Software, Inc.
www.ProfoundLogic.com
(937) 439-7925