Positioning

Positioning controls where an element sits relative to its normal place in the document, its parent, or the browser window. The Style panel exposes every CSS positioning mode so you can pull elements out of the normal flow when you need to.

Two things to keep in mind:

• Normal flow handles most layouts. You only need positioning for overlays, sticky headers, badges, and other elements that must break out of the regular stacking order.
• A positioned element needs a positioned ancestor. Absolute positioning looks up the tree for the nearest parent whose Position is not static. If it finds none, it uses the page itself.

How normal flow works

By default, every element follows Position: static. Elements stack top to bottom in the order they appear in the HTML. The offset properties (Top, Right, Bottom, Left) have no effect on static elements.

If your layout needs are about arranging items side by side or distributing space, use Flexbox instead of positioning.

Nudging an element with relative positioning

Set Position to relative and the element stays in its normal spot in the flow but you can shift it visually using Top, Right, Bottom, and Left. The space it originally occupied is preserved -- other elements do not move to fill the gap.

Offset units available in Silex: px, %, em, rem, vh, dvh, vw, dvw, cqi, cqb, cqw, cqh, cqmin, cqmax.

When to use it: Small visual adjustments (shifting an icon up 2px to align with text), or establishing a positioning context for absolutely positioned children.

Pulling an element out of the flow with absolute positioning

Set Position to absolute and the element leaves the normal flow entirely. It is placed relative to its closest ancestor that has Position set to anything other than static. If no such ancestor exists, it positions itself relative to the page body.

1. Select the parent element and set its Position to relative (this is the anchor).
2. Select the child element and set its Position to absolute.
3. Use Top, Right, Bottom, Left to place it precisely.

When to use it: Badges on cards, close buttons on modals, decorative elements overlapping content.

Common mistake: Forgetting to set the parent to relative. The child jumps to the page level and you cannot figure out why.

Locking an element to the viewport with fixed positioning

Set Position to fixed and the element is removed from the flow and positioned relative to the browser viewport. It stays in place when the user scrolls.

When to use it: Persistent navigation bars, floating action buttons, cookie banners.

Watch out: Fixed elements can cover content underneath. Give the page body enough top padding (or margin) to compensate for a fixed header's height.

Sticking an element during scroll

Set Position to sticky and the element behaves like relative until the user scrolls past a threshold you define with Top (most commonly). Once the threshold is reached, the element "sticks" in place like a fixed element -- but only within its parent container. When the parent scrolls out of view, the sticky element goes with it.

1. Select the element.
2. Set Position to sticky.
3. Set Top to 0px (or whatever offset you want from the viewport edge).

When to use it: Section headers in a long list, a sidebar that follows the scroll but stops at the footer.

Common mistake: The parent has Overflow set to hidden or auto. Sticky positioning requires the parent to allow visible overflow in the scroll direction.

Controlling stacking order with z-index

When elements overlap (because of absolute, fixed, or sticky positioning, or negative margins), Z-index determines which one appears on top. Higher numbers are closer to the viewer. The default is auto (effectively 0).

Z-index only works on positioned elements (anything except static) or flex/grid children. In Silex, it is a slider ranging from -10000 to 10000.

Fixed values: auto, unset, initial, inherit, revert.

Tip: Use small, predictable values. A common scheme: content at 1, dropdown menus at 10, modals at 100, tooltips at 1000. Jumping straight to 9999 makes future layering harder.

Controlling overflow

Overflow determines what happens when content is larger than its container. In Silex the property is split into two sub-properties:

• Overflow X (horizontal): auto, hidden, visible, scroll, inherit, initial, unset
• Overflow Y (vertical): same values

Value	Behavior
visible (default)	Content spills out of the box. No clipping.
hidden	Content is clipped. No scrollbars.
scroll	Content is clipped. Scrollbars always show.
auto	Scrollbars appear only when content overflows.

When to use it: Hiding overflowing decorative elements, creating scrollable panels, or preventing layout shifts from long text. Remember that overflow: hidden on a parent will break position: sticky on its children.

Controlling visibility

Visibility hides an element visually while keeping its space in the layout. Values: visible, hidden, collapse, inherit, initial, unset.

This is different from Display none (which removes the element from the flow entirely). Use Visibility hidden when you need to reserve the element's space but not show it -- for example, hiding a column in a table without collapsing the layout.

Practical examples

Sticky navigation bar: 1. Select the nav section. 2. Position: sticky, Top: 0px. 3. Z-index: 10 so it stays above page content.

Badge on a card: 1. Select the card container. Position: relative. 2. Add a small text element inside it. Position: absolute, Top: -8px, Right: -8px. 3. Style the badge with background color and border radius.

Full-screen overlay: 1. Add a Div for the overlay. Position: fixed, Top: 0, Right: 0, Bottom: 0, Left: 0. 2. Z-index: 100. 3. Background color with some opacity for a dimming effect.

Common mistakes

• Using absolute positioning for layout. If you find yourself absolutely positioning every element, switch to Flexbox. Absolute elements do not respond to siblings.
• Forgetting the positioning context. An absolutely positioned element looks for the nearest non-static ancestor. No ancestor? It uses the page.
• Z-index wars. Adding ever-larger z-index values because things keep appearing behind other things. Step back and plan your stacking layers.
• Overflow hidden breaking sticky. A parent with overflow hidden or auto prevents sticky positioning from working.

Learn more

• MDN: CSS Positioning -- beginner tutorial
• MDN: Stacking context -- how z-index contexts work
• Flexbox -- layout without positioning
• The box model -- how margin, padding, and dimensions interact with positioning
• Responsive design -- adapting positioned elements across breakpoints

---

Advanced: container queries and positioned elements

Container Type

Silex supports Container-type on elements, with values normal, size, and inline-size. When you set an element as a query container, its descendants can use container query units for their offsets: cqi, cqb, cqw, cqh, cqmin, cqmax. This is useful for positioning elements relative to their container's size rather than the viewport.

Dynamic viewport units

The offset properties support dvh (dynamic viewport height) and dvw (dynamic viewport width) in addition to standard vh/vw. Dynamic units account for mobile browser chrome that appears and disappears during scroll, giving more accurate positioning on mobile devices.

The inherit, initial, and unset keywords

Every positioning property accepts inherit (use the parent's value), initial (use the CSS default), and unset (inherit if the property naturally inherits, otherwise use initial). These are useful when overriding styles at different breakpoints.

Reference: all positioning properties

Property	Type	Values / Units	MDN
Position	select	static, relative, absolute, fixed, sticky, inherit, initial, unset	link
Top	number	px, %, em, rem, vh, dvh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax	link
Bottom	number	px, %, em, rem, vh, dvh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax	link
Right	number	px, %, em, rem, vh, vw, dvw, cqi, cqb, cqw, cqh, cqmin, cqmax	link
Left	number	px, %, em, rem, vh, vw, dvw, cqi, cqb, cqw, cqh, cqmin, cqmax	link
Z-index	slider	-10000 to 10000, auto, unset, initial, inherit, revert	link
Overflow X	select	auto, hidden, visible, scroll, inherit, initial, unset	link
Overflow Y	select	auto, hidden, visible, scroll, inherit, initial, unset	link
Visibility	select	visible, hidden, collapse, inherit, initial, unset	link
Display	select	block, inline, inline-block, flex, grid, inline-flex, none, inherit, initial, unset	link
Container-type	select	normal, size, inline-size	link

---

Quiz

Q1: You want a notification badge to sit in the top-right corner of a card. What do you set on the card and the badge?

• A) Card: Position absolute. Badge: Position relative.
• B) Card: Position relative. Badge: Position absolute, Top 0, Right 0.
• C) Card: Position static. Badge: Position fixed, Top 0, Right 0.

Answer

B) Card: Position relative. Badge: Position absolute, Top 0, Right 0. -- The card becomes the positioning context. The badge is pulled out of the flow and placed at the card's top-right corner.

Q2: Your sticky header stops sticking when you scroll. What is the most likely cause?

• A) Z-index is too low.
• B) A parent element has Overflow set to hidden or auto.
• C) You forgot to set Position to relative on the parent.

Answer

B) A parent element has Overflow set to hidden or auto. -- Sticky positioning requires the parent's overflow to be visible in the scroll direction. Overflow hidden or auto creates a new scrolling context that prevents sticky from working as expected.

Q3: You set an element to Position absolute but it jumps to the top-left of the entire page instead of its parent container. Why?

• A) The z-index is wrong.
• B) No ancestor has a non-static Position value.
• C) The element needs Display block.

Answer

B) No ancestor has a non-static Position value. -- Absolute positioning looks for the nearest positioned ancestor. If every ancestor is static (the default), the element positions relative to the page body. Set the intended parent to Position relative.

Q4: You want an element to be invisible but still take up space in the layout. Which approach do you use?

• A) Display none
• B) Visibility hidden
• C) Position absolute with Left -9999px

Answer

B) Visibility hidden -- It hides the element visually but preserves its space in the document flow. Display none removes it from the flow entirely.