The real question is: how do positioned elements work?
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind....
Position:absolute
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the page so that
it can no longer influence the size or position of any other page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from the position of
its closest PARENT *positioned*
element - in the absence of any explicitly positioned parent, this will
default to the <body> tag, which is always positioned at 0,0 in the browser
viewport.
This means that it doesn't matter where in the HTML code the layer's code
appears (between <body> and </body>), its location on the screen will not
change. Furthermore, the
space in which this element would have appeared were it not positioned is
not
preserved on the screen. In other words, absolutely positioned elements
don't take up any space on the page. In fact, they FLOAT over the page.
Position:relative
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from the flow of the
code on the page, so it will use the spot where it would have appeared
based
on its position in the code as its zero point reference. If you then
supply top, right, bottom, or left positions to the style for this element,
those
values will be used as offsets from its zero point.
This means that it DOES matter where in the code the relatively positioned
element appears, as it will be positioned in that location (factoring in
the offsets) on the screen. Furthermore, the space where this element
would
have appeared is preserved in the display, and can therefore affect the
placement of succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
-------------------
As with relative position, static positions also "go with the flow". An
element with a static position cannot have values for offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.
Position:fixed
------------------
A page element with this style will not scroll as the page content scrolls.
Support for this in elements other than page backgrounds is quirky
There are two other things you need to know:
1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
Now - to your questions
Do layers always have to
be in an absolute position
In FP "speak", a "layer" is an absolutely positioned <div> tag. So, yes -
it will always have to be in an absolute position. Using the tag properties
part of FP (select the tag on the Design View and edit its properties), you
can change it to relative positioning. However, if you have followed the
descriptions above, you will see that relative positioning can behave quite
differently than absolute positioning.
can it be positioned under a table where the
layer position can move up and down as I insert or delete rows from the
table?
A relatively positioned div (or even a statically positioned div) will do
exactly this.
My layout seems to look okay in design mode but when I preview it,
everything moves around.
That's Mom Nature telling you that there are problems in your code. Without
actually seeing it, I would be hard pressed to say more.
