Absolute positioning
You can use absolute
positioning on the HTML editor’s Page view. The following
sections describe how it works and what it can do for you.
About absolute positioning
Dynamic HTML allows HTML elements to be positioned on a page, independent
of their position within the HTML stream. An absolutely positioned
HTML element has its position attribute set to absolute instead
of static.
Absolutely positioned elements also have a z-index, which
specifies the visual order of overlapping absolutely positioned
elements (and how absolutely positioned elements are ordered relative
to elements in the HTML stream).
An absolutely positioned element is also known as a two dimensional
(2D) element. A statically positioned element is known as a one
dimensional (1D) element. A relatively positioned element (an element
with its position attribute set to relative) is treated as a 1D
element.
Browser specificity Absolute positioning is implemented differently in Netscape
and Internet Explorer. The HTML editor implements absolute positioning
that is optimized for Internet Explorer. This implementation will
not work with Netscape browsers. (Absolute positioning in Netscape
requires the use of LAYER tags or STYLE tags with a position property.)
What you can do
The HTML editor’s
Page view makes it easy to work with absolutely positioned elements.
By using the Position menu, you can toggle an element from static
positioning to absolute positioning (and vice versa). Once an element
uses absolute positioning, you can place it anywhere on the 2D space of
your page just by dragging it.
The Position menu also enables you to:
- Change
the z-index of an absolutely positioned element - Move (nudge) an absolutely positioned element by
a specified number of pixels - Lock an absolutely positioned element
in place to prevent it from being inadvertently moved or resized - Constrain absolutely positioned elements to move
only horizontally or vertically when you drag them - Adjust the invisible grid that Page view
provides to help you place absolutely positioned elements
Elements that can be absolutely positioned
You can use absolute positioning on the following kinds of
elements:
| APPLET | HR | OBJECT |
| BUTTON | IFRAME | SELECT |
| DIV | IMG | SPAN |
| EMBED | INPUT | TABLE |
| FIELDSET | MARQUEE | TEXTAREA |
Absolute positioning is not available for other kinds of elements
or for design-time controls (DTCs).
Using style sheets for absolute positioning
If you want to use the same position definitions in a number
of files, you can set these values in an external style sheet.
For more information, see Chapter 4, “Working with Style Sheets
and Framesets”.
Toggling between static and absolute positioning
In Page view of the HTML editor, you can use absolute positioning
to place HTML controls anywhere on the 2D space of your page.
The z-index style attribute of a new absolutely positioned
element is initially set higher than all other absolutely positioned
elements in its document or container. As a result, that element
will display in front of older absolutely positioned elements.
In addition, the new element’s z-index always begins
as a positive value, causing that element to display in front of
the HTML (1D) stream of the page. (Absolutely positioned elements
with a negative z-index display behind the HTML stream.)
To toggle from static positioning to absolute
positioning:
-
Select a control in Page view by clicking
its outside edge.The control should now display a dotted border. (If you see
a slashed border, click that border to make it dotted.) -
Select Position>Use Absolute Positioning
from the menu bar.or
Right-click the dotted border and select Position>Use
Absolute Positioning from the pop-up menu. - Drag the control anywhere you want on the page.
To toggle from absolute positioning to static
positioning:
-
Select a control in Page view by clicking
its outside edge.The control should now display a dotted border. (If you see
a slashed border, click that border to make it dotted.) -
Select Position>Use Absolute Positioning
from the menu bar.or
Right-click the dotted border and select Position>Use
Absolute Positioning from the pop-up menu.The control automatically moves from its absolute position
to its position within the HTML stream of the page.
Setting absolute positioning options
To set absolute positioning options for Page view:
- Select Position from the menu bar.
-
Select one of these actions from the Position
menu:Action What it does Constrain Positioning Toggles constrain mode on or off.In constrain mode, absolutely positioned elements move along
only one axis at a time (either X or Y) when you drag them. This
enables you to adjust an element’s horizontal position
without affecting its vertical position (and vice versa).Set Grid Size Sets the cell size of the invisible grid
that absolutely positioned elements snap to when you drag them.You specify the X and Y values for the cell size (in pixels)
in the Set Grid Cell Size dialog box.
Manipulating an absolutely positioned element
To manipulate an absolutely positioned element:
-
Select a control in Page view by clicking
its outside edge.The control should now display a dotted border.
(If you see a slashed border, click that border to make it dotted.) -
Select Position from the menu bar.
or
Right-click the dotted border and
select Position from the pop-up menu. -
Select one of these actions from the Position
menu:Action What it does Bring To Front Brings the element to the front of its
document or container.This sets the element’s z-index style attribute to
the highest of all the absolutely positioned elements on its side
of the HTML stream, adjusting the z-index of other elements as necessary.Send To Back Sends the element to the back of its
document or container.This sets the element’s z-index style attribute to
the lowest of all the absolutely positioned elements on its side
of the HTML stream, adjusting the z-index of other elements as necessary.Bring Forward Brings the element forward by one z-index
layer in its document or container, adjusting the z-index of other elements
as necessary.Send Backward Sends the element backward by one z-index
layer in its document or container, adjusting the z-index of other elements
as necessary.Bring Above Text Brings the element in front of the HTML
stream of the page by making its z-index a positive value.Send Below Text Sends the element in back of the HTML
stream of the page by making its z-index a negative value.Nudge Element Moves the element from its current X
and Y coordinates by the number of pixels you specify in the Nudge
Object dialog box.Lock Element Locks the element in place to prevent
it from being inadvertently moved or resized in Page view.Lock Element prevents you from changing the element’s X
and Y coordinates, but not its z-index. It does not affect the runtime
behavior of the element.