Semantic-Org/Semantic-UI · warning

Sticky element must be inside a relative container

Error message

Sticky element must be inside a relative container

What it means

Semantic UI Sticky error message stating the sticky element must live inside a relatively-positioned container. Note: in this build the throw site is commented out (sticky.js:401 //module.error(error.container,...)), so the message is defined but not actively emitted at runtime; the underlying requirement still stands - sticky positioning needs a positioned ancestor.

Source

Thrown at src/definitions/modules/sticky.js:960

  onReposition   : function(){},

  // Called on each scroll
  onScroll       : function(){},

  // Called when element is stuck to viewport
  onStick        : function(){},

  // Called when element is unstuck from viewport
  onUnstick      : function(){},

  // Called when element reaches top of context
  onTop          : function(){},

  // Called when element reaches bottom of context
  onBottom       : function(){},

  error         : {
    container      : 'Sticky element must be inside a relative container',
    visible        : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.',
    method         : 'The method you called is not defined.',
    invalidContext : 'Context specified does not exist',
    elementSize    : 'Sticky element is larger than its container, cannot create sticky.'
  },

  className : {
    bound     : 'bound',
    fixed     : 'fixed',
    supported : 'native',
    top       : 'top',
    bottom    : 'bottom'
  }

};

})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

1. Add position:relative to the sticky element's container (the element referenced by settings.context, or the immediate parent).
2. Confirm settings.context points to an element that is or can be made position:relative.
3. If you rely on this message at runtime, note it is disabled in this build - rely on visual debugging instead.

Example fix

// before
<div>
  <div class="ui sticky">...</div>
</div>
// after
<div style="position:relative">
  <div class="ui sticky">...</div>
</div>

function ensureRelativeContainer($sticky) {
  var $parent = $sticky.parent();
  if ($parent.css('position') === 'static') {
    $parent.css('position', 'relative');
  }
}

function hasPositionedAncestor($el) {
  var p = $el.parent();
  while (p && p.length) {
    var pos = p.css('position');
    if (pos === 'relative' || pos === 'absolute' || pos === 'fixed') return true;
    p = p.parent();
    if (p.is('body')) break;
  }
  return false;
}

When it happens

Trigger: Conceptually fires when the sticky element's parent/container is statically positioned (position:static). Because the throw site is commented out in this source, the message will generally not appear; instead the symptom is a sticky element that misbehaves (jumps, doesn't pin).

Common situations: Wrapping .ui.sticky inside a default-flow div without position:relative; converting a layout to flex/grid without re-adding position:relative on the container; CSS resets that strip position from ancestors.

Related errors

• API action used but no url was defined
• No URL specified for api event
• The beforeSend callback must return a settings object, befor
• Missing a required URL parameter:
• You must specify a string identifier for each field

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/39c52656254677e9. Report an issue: GitHub.