Hovering elements over each other

[Shannon Cayze]

Hello all,

Is there a way to hover one HTML element over another and reliably
position it within the page? I know how to set the z-index and
position style attributes to get the element to hover, but positioning
it accurately is another issue.

I got it to work in a standard HTML page, but when I sent that page to
my client they imported it to SharePoint. Since SharePoint adds
additional content to the page, all of my elements that were
absolutely positioned were offset. Also, since the z-index was set
manually, using javascript to set the position based on the
offsetParent doesn't work (I can't iteratively retrieve all offset
parents).

Is there a way to hover an element over another without setting the "z-
index" and "position" style attributes so that it maintains the same
parent structure?

Thanks,
Shannon

 

[Shannon Cayze]

Thanks, Ben. I'll give that a shot.

What happened was that my client sent me a PowerPoint presentation
with samples of what they wanted menu buttons to look like. When I
right-clicked in PowerPoint and chose "Save as Image", the text on the
buttons looked awful. Therefore, I tried saving just the menu button
background as an image and hovering an <a> element with the button's
text over the background image. I was able to position them absolutely
and exactly where I wanted them. However, as described in my original
post, any slight change of the content threw everything off, so it was
pretty unreliable.

I fixed the problem by doing a print screen of the PowerPoint
presentation and using Photoshop to save the images. Then the text
looked fine. However, this is something that may come in handy another
time and is helpful to know.

Thank you for your help,
Shannon

 

[ksamdev]

Hello all,

Is there a way to hover one HTML element over another and reliably
position it within the page? I know how to set the z-index and
position style attributes to get the element to hover, but positioning
it accurately is another issue.

I got it to work in a standard HTML page, but when I sent that page to
my client they imported it to SharePoint. Since SharePoint adds
additional content to the page, all of my elements that were
absolutely positioned were offset. Also, since the z-index was set
manually, using javascript to set the position based on the
offsetParent doesn't work (I can't iteratively retrieve all offset
parents).

Is there a way to hover an element over another without setting the "z-
index" and "position" style attributes so that it maintains the same
parent structure?

Thanks,
Shannon

Suppose you want to add title to image. This is similar to your
problem, right?

Then I'd do next thing:

<div style='position:relative'>
<img style='width:100px' src='url'>
<span style='position:absolute;left:0px;right:0px;bottom:0px'>Title</
span>
</div>

The idea is that you add wrapper as div around element. In given
solution you do not even need to play with z-index and Title is
automatically fixed to the bottom of wrapper that makes effect of
hovering one element by another.