The top property controls the vertical offset of an element when that element participates in positioning. It does not itself change how the element is laid out in normal flow; instead it tells the browser how far to move a positioned element along the y‑axis relative to the reference point defined by its positioning context. Because it only applies to elements that are positioned, its effects depend entirely on how that element’s positioning is established via position.

How the offset created by top is interpreted differs by positioning scheme. For an element whose position is the relative type, changing top shifts the element visually away from its normal location without altering the space it originally occupied. For absolutely or fixed positioned elements, top is measured from the relevant containing block (typically the padding edge of the nearest positioned ancestor) and determines the element’s placement within that context. For sticky positioning, top defines the threshold at which the element becomes fixed to the viewport as the user scrolls. Related horizontal offset properties like left, right and the vertical counterpart bottom work the same way conceptually along their respective axes.

The top offset interacts with other layout concerns in ways that are important to anticipate. Offsetting an element with top does not create margin collapse with adjacent boxes and, for relatively positioned elements, does not affect document flow — other elements behave as if the relatively positioned element were still in its original place. When used with stacking controls, top contributes to the element’s placement but the painting order and overlap are ultimately governed by stacking context rules and z-index. Transformations such as those from transform can also affect the visual relationship between an offset element and its surroundings because transforms create new containing contexts for things like painting and hit testing.

In practical layout work, consider how the containing block is formed and how offsets will behave across different viewport sizes and scroll states. Offsetting an element can be a simple way to nudge visuals into place without changing document flow, but relying heavily on fixed offsets can reduce responsiveness; often a combination of offsets and other layout techniques (flexbox/grid or controlled margin spacing) yields more robust, maintainable results.