Question

I used position:absolute; so that when you click the tab “Send this page to your email”, at the top, the panel goes down and goes over the content underneath instead of pushing them down. However, using absolute position means that the tab will move to the left when you zoom in or move to the right when you zoom out. It just doesn’t look right when you zoom in or out. I want the tab to “go inwards” when you zoom out and not have it “slide”. Is it possible to keep the tab from “sliding” and line it up with panel that slides out?

Here’s my page with the tab: http://coroomer.com/apartments/ztestpage/index.php

Answer 1

Since you’re using absolute positioning, you don’t need to bother with javascript/jQuery. You can just modify your HTML/CSS as follows:
Move this:

<p align="center" class="flip" id="toggle">Send this page to your email.</p>

so that it’s the first child of this:

<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">

In the above div (id=”map_canvas”), set overflow to “visible”. Then set #toggle’s CSS as follows (tweak values to suit your needs):

#toggle {
    font-family: segoe ui;
    left: 100px;
    top: -44px;
}

If you don’t want to go that route (but you really should), you’d have to write a function that fires on window.onresize which sets the #toggle element’s position relative to whatever element of your choosing.