Hovering elements over each other

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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

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?


Re: Hovering elements over each other

Quoted text here. Click to load it

Set position: relative (but not top, left, bottom or right) and z-index.
That way the element reliably stays normal-flow (as if it were position:
static) but z-index works on it.

It's not completely clear what you want so that might not answer your
question. If you still want to absolutely position these things, but
relative to some container which is in the bit of content that you're
writing rather than relative to the viewport (or to whatever positioned
ancestors may be lurking in the SharePoint content), set position:
relative on that container.

position: absolute positions something relative to its nearest ancestor
that isn't position: static. So the usual way to specify the container
you want is to make it position: relative since that minimizes
undesirable side-effects.

Re: Hovering elements over each other

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,

Re: Hovering elements over each other

Quoted text here. Click to load it

You may be making life hard for yourself-- you can just use a <button>
(or any other) element and set its background-image in CSS to the image
you saved out of PowerPoint.

Re: Hovering elements over each other

Quoted text here. Click to load it

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

Then I'd do next thing:

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

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.

Site Timeline