stephenmcd/mezzanine — pull request #510 by jpotterm (2012-12-18 20:27:35+00:00)
Title: Inline (front-end) editing: fix edit links that are children of absolutely positioned elements

The problem is best demonstrated by an example:

```html

```

```css
div {
position: absolute;
top: 50px;
left: 50px;
}
span {
position: absolute;
top: 100px;
left: 100px;
}
```

In this case the span will be placed on the page 150px from the top and the left because absolutely positioned elements are positioned relative to their nearest positioned ancestor. However the current code for positioning the "Edit" links (and highlights) gets the original element's offset (position relative to the document) and then sets the edit link's top and left style based on the offset. This works fine unless the original element has a positioned ancestor (quite common actually) in which case it will be wrong.

The fix for this is to set the "Edit" link's offset instead of top/left so that jquery automatically does all the calculations to position it relative to the document.

The one caveat is that jQuery's offset function doesn't work while elements are set to display:none, which is currently what the "Edit" link and highlight are using. To fix this we switch to using visibility:hidden instead, which does work.

Let me know if you have any questions/concerns. I've tested this is Webkit, Firefox, and IE7+. Hope this is useful!