Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Gmail - How does it do this?

Posted on 2006-04-06
Medium Priority
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:  http://fapomatic.com/14/gmailchat.gif

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

Expert Comment

ID: 16395685
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

ID: 16396302
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.

Expert Comment

ID: 16396502
Theres some google thing that uses that too.  It's becoming a new fad.  

Accepted Solution

Sammo earned 150 total points
ID: 16403594

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month14 days, 5 hours left to enroll

580 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