How do I lock a layer in place?

Question

I am trying to get a top layer to stay in position above the layer below it. When I resize the window in the browser it floats all around. How do I get it to stay in the same place relative to the rest of the design? Here it is:
http://www.martyrobertsproductions.com/scf/index.html
Thank you for any help - this is driving me crazy!

Answer 1

Here's the deal. This is in HTML-speak, not GoLive-speak. It's good to
understand the non-filtered meaning of these things.
"Layer" is just a nick-name for an absolutely positioned container that
happens to be a
tag. In fact, anything on your page *can* be
absolutely positioned - it doesn't have to be a
tag, and it doesn't
even have to be a container (for example, an image or even a horizontal
rule -
- can be absolutely positioned).
When something is absolutely positioned, several things happen to it:
1. It is removed from the normal flow. This means that the page suddenly
forgets that the absolutely positioned element is even there, and is
rendered as if that element were not even in the code. This prevents an
absolutely positioned element from interacting with anything else on the
page, meaning that it cannot push something else out of the way.
2. Then, after all that happens, the absolutely positioned element is
located on the page based on its top/right/bottom/left coordinate values.
You would think that if the left coordinate for an absolutely positioned
element were 100px, that this would refer to the left margin of the page and
in some cases it does, but not in all cases. The reality of positioning is
much more complex than this. The offsets given to an absolutely positioned
element are calculated from the location of that element's nearest
positioned ancestor. You can see what I mean by following this.
Create a blank page. On it, place two layers. Make them both 100px tall
and wide, and 100px left. Make one 100px top, and the other 200px top.
You will now see two boxes on the page one immediately above the other. Now
grab the bottom layer, and drag and drop it WITHIN the top layer (you will
have to do this in the code). Where do you now see the second layer?
It's now 200px below the top margin and 100px to the right of the left
margin of the PARENT LAYER (if you did things correctly). But the CSS that
locates this second layer has not changed. It's still 100px left, and 200px
top. What has changed for this second layer is its zero coordinate
reference point. It's now being placed in the rendered page based on the
location of its closest (in the code) positioned ancestor (the first layer).
That's the concept. So how come, when there is NO closest positioned
ancestor, the top/right/bottom/left locations are calculated from the
browser's margins? That's the way it works - when there is no positioned
ancestor, the  tag becomes the zero reference, i.e., the upper,
left-hand corner of the browser viewport.
You are half way there. The next concept we need to explore is another kind
of positioning - relative positioning. In a curiously redundant way, a
relatively positioned element has these properties -
1. It is NOT removed from the normal flow. In other words, the page
doesn't forget about it, and it can push other things around, or be pushed
around by other things.
2. It can be offset (using those same top/right/bottom/left values) from
its base location.
3. BUT when offset, the page still thinks it's where it started, not where
it winds up.
Now these last two things sound pretty goofy, and they are. To understand
the centering thing, though, you don't need to worry about them. The
important thing is that a relatively positioned element is not removed from
the normal flow.
The final concept you need is much simpler. Any block tag can be centered
within its container by giving it an explicit width, and then setting
left/right margins to 'auto'. Thus -
1. The browser know the element's width.
2. The browser knows the width of the element's container (whether it be
the whole page, or a table cell).
3. With auto left/right margins, the browser subtracts the element's width
from the container's width, and places half of the remainder on the left and
the right. Bada bing - it's centered.
Now for the big finish.
Since a relatively positioned element is not removed from the flow, it can
be centered. Since it's relatively positioned, any internal absolutely
positioned elements will use its location on the screen as a zero point
reference. Thus as this 'nearest positioned ancestor' to those interior
absolutely positioned elements moves to its center point, the absolutely
positioned elements are dragged along for the ride.
Get it?
Murray