Choose the positioning scheme: static, relative, absolute, fixed or sticky. This family contains 5 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: sticky;

Example#

example
html
<div class="relative">
  <span class="absolute top-0 right-0 badge">NEW</span>
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • relative on the parent establishes the containing block for absolute children
  • sticky needs a scroll container and an inset utility like top-0

Common mistakes#

  • absolute without a positioned ancestor escapes to the viewport-sized initial containing block
  • sticky inside an overflow: hidden parent never sticks

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive