Gmail - How does it do this?

Posted on 2006-04-06
Last Modified: 2012-08-13
I was using Gmail and suddenly the Gmail Chat window appeared inlined alongside my message.  What got my attention was that the window hovers over the main body of the window without bobbing up and down like so many failed attemptes at Javascript repositioning.  How do they do this?  

Check out the pic here:

The window sits perfectly static above all text beneath it unaffected by the main window's scrolling.

Are they using some special IE6 command or is the Google activex toolbar assisting in some way.

Im using Windows XP Pro SP2 with IE6.

Question by:aniston
    LVL 5

    Expert Comment

    Its nothing fancy, just some CSS tricks to make the box float above tha page layout.  It works in firefox too.  I'd suggest looking at the page source and any css files it references to see the code that does it.

    Author Comment

    WHat are the CSS commands to perform this effect?  I know about Position and Float but these wont keep a block perfectly fixed and overlayed over another while scrolling the main window.
    LVL 3

    Expert Comment

    Theres some google thing that uses that too.  It's becoming a new fad.  
    LVL 2

    Accepted Solution


    Check out this code:

    <div style="z-index: 1; position: absolute; right: 10px; bottom: 10px; background-color: #cc3300; width: 280px; padding: 10px; color: white; ">Hello World</div>

    This would create a floating box which constantly stayed in the bottom right corner of the page. If you just play around with the values you should be able to get what you want!

    Hope this helps

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now