Is there any CSS workaround which does not rely on modern browsers to give an element a "relative-fixed" positioning?
For example, how could you create a "fixed" menu at the top of the page, without taking the element out of the flow of the document, and without needing to add additional HTML elements to the page?
I've tried each of the positioning properties as an attempt, but I could not do it without adding an extra margin to all the elements below it, or creating an additional HTML element as "space".
In other words, the space of its original (static) position still remains.
straight out of MDN:
relative The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. The effect of relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
You are better off setting position: absolute; for moving element and the whole thing should happen inside a positioned (where position isn't static) parent element.