Show-Hide Layer positioning

snabdab · snabdab

For my question, Please refer to the following page:
[url]http://www.respond1.com/dynamic/layers.html[/url]

MouseOver the black box will show a layer, and MouseOut hides the layer. I
would like this layer to stay in a fixed position relative to the position of
the black box, not fixed to the top and left side as it is. I cannot figure out
how this is done.

Any help is greatly appreciated.
Dave

Murray *ACE* · Murray *ACE*

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 of positioning (with regard to
placement of elements on the page only)....

Position:absolute (or A/P elements)
-----------------------
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 pa*ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *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 laye*r's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthe*rmore, the space in
which
this element would have appeared were it not positi*oned 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 (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he 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 relativ*ely positioned
element appears (, as it will be positioned in that location (*factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this e*lement 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 offset*s (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 c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky

There are several 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%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.

You can see a good example of the essential difference between absolute and
relative positioning here -

[url]http://www.great-web-sights.com/g_layersdemo.asp[/url]

You can see a good demonstration of why using layers for a page layout tool
is dangerous here -

[url]http://www.great-web-sights.com/g_layer-overlap.asp[/url]

You can make your layers track the rest of the content on the page by giving
them a centering, positioned ancestor to track. To do that follow these
steps.

Change this -

</head>

to this -

<style type="text/css">

</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

</div>
</body>

and see if that helps.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"snabdab" <webforumsuser@macromedia.com> wrote in message
news:e3th04$kdo$1@forums.macromedia.com...

> For my question, Please refer to the following page:
> [url]http://www.respond1.com/dynamic/layers.html[/url]
>
> MouseOver the black box will show a layer, and MouseOut hides the layer. I
> would like this layer to stay in a fixed position relative to the position
> of
> the black box, not fixed to the top and left side as it is. I cannot
> figure out
> how this is done.
>
> Any help is greatly appreciated.
> Dave
>

Show-Hide Layer positioning

Thread Tools

Display

Show-Hide Layer positioning

Similar Questions and Discussions

Menu and Show Hide Layer (broken in IE6)

problem with show-hide layer behavior in IE

shortcut to show/hide current layer?

show-hide layer trouble

show hide layer function

Re: Show-Hide Layer positioning

Posting Permissions