Why is my fixed position element not relative to the viewport?

Recently I was puzzled as to why an element with a position: fixed CSS style was not positioned relative to the viewport but relative to an ancestor DOM element. I was mistakenly convinced fixed position elements were always layed out relative to the viewport. It turns out this ancestor had a CSS transform applied which resulted in it being the element in questions containing block which means that the fixed position elements positioning is relative to this element.

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

CSS Transforms Module Level 1