Hello,

I am trying to create a site which uses similar technology to that of Google Analytics Site Overlay, but will be framing my own site. I may decide later to change the type of overlay (or eliminate it entirely), so using overlay instead of directly modifying the source pages is the only option I am considering. For now, I am also testing a static bar positioned at the top (such as Google Analytics uses as well), which will use an iframe below to serve the source page.

Here is the code:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Test Overlay</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
    margin: 0;
    padding: 40px 0 0 0;
    overflow: hidden;
    font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 900px;
    height: 30px;
    padding: 5px 0;
    line-height: 1;
    background: #333;
    color: #fff;
    text-size: 1.2em;
}
#bar a {
    padding: 0 5px;
    color: #fff;
}
#frame {
    width: 100%;
    height: 100%;
    z-index: 10;
}
#overlay_example
{
    position: absolute;
    left: 275px;
    top: 275px;
    font-size: 14px;
}
</style>
</head>
<body>
<div id="content">
    <div id="bar">
        <a href="http://mytestsite.com" title="overlay example">Test Site</a>
    </div>
    <div>
        <iframe scrolling="auto" id="frame" src="http://www.google.com/search?hl=en&q=CSS+iframe+overlay" frameborder="0" ></iframe>
    </div>

    <div id="overlay_example">* Overlay Data *</div>
</div>
</body>
</html>
However, the main problem I have is that on my target web site (Google search in this test case), when pages scroll longer than the viewable screen area, as I scroll down, the overlay text stays static in place. Is there anyway to change the CSS so that the overlay text stays put next to what I want it to overlay in the target site? In the case of Google search results for example, if I were to overlay text next to the Google logo, the overlay text would always remain next to the Google logo, so that when I scrolled down far enough that the logo was no longer in view, the overlay text was also no longer in view. This works just like Google Analytics in that I want the overlay text to anchor right to the text it overlays.

Please let me know if I can answer any questions about how I'd like it to work.

Thanks!