https://drafts.csswg.org/css-position/#position-box
The position box is its margin box, except that for any side for which the distance between its margin edge and the corresponding edge of its containing block is less than its corresponding margin, that distance is used in place of that margin
Also, Gecko, Blink and WebKit agree that if the computed margin is auto, then zero is used instead of the margin.
See https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
This is a round-tripping violation!
<!DOCTYPE html>
<div style="overflow: hidden; width: 100px; height: 100px; background: red">
<div style="width: 500px">
<div id="sticky" style="position: sticky; right: 0; width: 100px; height: 100px; margin-left: auto; background: green;"></div>
</div>
</div>
<button>Click me</button>
<script>
document.querySelector("button").addEventListener("click", () => {
sticky.style.marginLeft = getComputedStyle(sticky).marginLeft;
// Workaround for lack of invalidation in Blink
sticky.style.display = "none";
document.body.offsetLeft;
sticky.style.display = "";
});
</script>
https://drafts.csswg.org/css-position/#position-box
Also, Gecko, Blink and WebKit agree that if the computed margin is
auto, then zero is used instead of the margin.See https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
This is a round-tripping violation!