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 an element between static and absolute
positioning
In Page view of the HTML editor, you can use absolute positioning
to place certain HTML elements 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 an element from static positioning to
absolute positioning:
-
Select the element by clicking its outside
edge.The element 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 element’s dotted border and
select Position>Use Absolute Positioning from the popup
menu. - Drag the element anywhere you want on the page.
To toggle an element from absolute positioning
to static positioning:
-
Select the element by clicking its outside
edge.The element 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 element’s dotted border and
select Position>Use Absolute Positioning from the popup
menu.The element 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 offIn 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 the element by clicking its outside
edge.The element 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 element’s dotted border and
select Position from the popup 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 containerThis 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 necessarySend To Back Sends the element to the back of its
document or containerThis 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 necessaryBring Forward Brings the element forward by one z-index
layer in its document or container, adjusting the z-index of other elements
as necessarySend Backward Sends the element backward by one z-index
layer in its document or container, adjusting the z-index of other elements
as necessaryBring Above Text Brings the element in front of the HTML
stream of the page by making its z-index a positive valueSend Below Text Sends the element in back of the HTML
stream of the page by making its z-index a negative valueNudge Element Moves the element from its current X
and Y coordinates by the number of pixels you specify in the Nudge
Object dialog boxLock Element Locks the element in place to prevent
it from being inadvertently moved or resized in Page viewLock 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