### Bug description

For HTML pages in website projects, the vertical position of `.column-margin` containers changes when refreshing a page from below the margin content.

When the [Article Layout](https://quarto.org/docs/authoring/article-layout.html) page is initially accessed, the column margin divs are anchored at the expected vertical height. However, accessing the page from an `anchorjs-link` (e.g., from the [Margin Content](https://quarto.org/docs/authoring/article-layout.html#margin-content) section) then *refreshing the page* causes column content to bunch up and overlap vertically. This seems to also occur when refreshing the page from a position below any given column margin content.

<img width="286" alt="overlapped-col-margin" src="https://user-images.githubusercontent.com/10624592/188954297-85a8734c-466a-4946-b58b-987fa21c0c5b.png">

Looking at the HTML, it appears the issue may be related to the `margin-top` property?

```html
<div class="no-row-height column-margin column-container">
  <div class="layout-example" style="margin-top: 3525.65px;">  <!-- Initially, this value is 18px -->
    <p>.column-margin</p>
  </div>
</div>
```

Checked on macOS 12.5 with:

* Firefox 90.8.2
* Chrome 105.0.5195.102

dragonstyle
2022-09-07T19:44:14Z
jasonratcliff
bug
v1.2
closed
Margin content vertical position changes with HTML page refresh
https://github.com/quarto-dev/quarto-cli/issues/2341