<p>I have a page with a Google Maps mashup that has pushpins that are color-coded by day (Monday, Tuesday, etc.) The IFrame containing the map is dynamically sized, so it gets resized when the browser window is resized. </p>

<p>I'd like to put a legend in the corner of the map window that tells the user what each color means. The Google Maps API includes a <code><a href="http://code.google.com/apis/maps/documentation/reference.html#GScreenOverlay" rel="nofollow noreferrer">GScreenOverlay</a></code> class that has the behavior that I want, but it only lets you specify an image to use as an overlay, and I'd prefer to use a DIV with text in it. What's the easiest way to position a DIV over the map window in (for example) the lower left corner that'll automatically stay in the same place relative to the corner when the browser window is resized?</p>

I would use HTML like the following:
```
```
<div id="wrapper">
   <div id="map" style="width:400px;height:400px;"></div>
   <div id="legend"> ... marker descriptions in here ... </div>
</div>
```
```
You can then style this to keep the legend in the bottom right:
```
```
div#wrapper { position: relative; }
div#legend { position: absolute; bottom: 0px; right: 0px; }
```
```
```
position: relative
```
will cause any contained elements to be positioned relative to the
```
#wrapper
```
container, and
```
position: absolute
```
will cause the
```
#legend
```
div to be "pulled" out of the flow and sit above the map, keeping it's bottom right edge at the bottom of the
```
#wrapper
```
and stretching as required to contain the marker descriptions.