How can I have an image "float" above another image or other elements with css?

Discussion in 'HTML' started by jollyroger, Feb 7, 2007.

  1. jollyroger

    jollyroger Guest

    I have a page that I want to have a little gif image (40 x 40) float
    or hover above the page content in a fixed position, something similar
    to those dhtml popups you see on some sites that always get in the
    way :)

    I would like to also make it a link to another page within my site.

    Can someone please tell me if this is possible using css and cross
    browser compatible?

    thanks!!
     
    jollyroger, Feb 7, 2007
    #1
    1. Advertisements

  2. jollyroger

    dorayme Guest

    You could do something like:

    <http://members.optushome.com.au/droovies/test/floatingImg.html>

    The link bit will be evident with the "hand" icon only for the
    part of the image that is clear of the text. This can be changed
    and make it always evident by changing the z-index but this then
    makes the image block out the text, something you may not want.
     
    dorayme, Feb 7, 2007
    #2
    1. Advertisements

  3. Jonathan N. Little, Feb 7, 2007
    #3
  4. jollyroger

    Ben C Guest

    Unfortunately your example with z-index:-1 hits a Firefox bug. The red
    square should go behind the text but Firefox puts it right behind the
    body background and you can't see it at all.

    Opera and Konqueror draw it in the right place, but don't let you click
    on it, I suppose on the grounds that the text is in the way so the red
    box isn't directly under the mouse, even the bits of it you can see.
     
    Ben C, Feb 7, 2007
    #4
  5. jollyroger

    dorayme Guest

    Would I leave out the units? <g>

    Anyway, the red square not showing? Why not? The img happened to
    be on the server and it is called cope-003.jpg so I just used it.
    Shows up in my browsers?


    Try

    <http://members.optushome.com.au/droovies/test/floatingImg2.html>

    with a freshly prepared square and a gif and the right size...

    To tell the truth, I have no idea if this is best way of
    achieving what OP wants, it was just a thought. Not something I
    have ever needed or done. What I would not mind boning up on is
    the idea of an image through which one can see stuff behind. that
    might come in handy when I have to time to be fancier...
     
    dorayme, Feb 8, 2007
    #5
  6. jollyroger

    dorayme Guest

    Forget this... A thoughtless wish here - if this z-index thing
    worked right, this would be it granted... how can one have been
    making stuff for as long as I have and never used z-index? It
    sounds so sexy too. I must make a point of using it somewhere.
     
    dorayme, Feb 8, 2007
    #6
  7. jollyroger

    dorayme Guest

    and now also

    So! Yes, you are right, now I test it in FF. I only looked at
    Safari to be honest. I notice iCab behaves like Safari, red sq
    shows, hand icon and clickable where the image pokes out at top
    under many conditions.
     
    dorayme, Feb 8, 2007
    #7
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.