CSS Display & Positioning

What does display do?

The display property controls an element's outer and inner layout behavior. Beginner level par block, inline, inline-block and none sabse important values hain.

.box {
  display: block;
}

display: block

A block-level box normally starts on a new line and stretches across the available inline width when its width is auto.

.card {
  display: block;
  width: 320px;
  padding: 1rem;
}

Elements such as div, section and headings are block-level by default in normal HTML styling.

display: inline

Inline boxes flow with surrounding text and do not normally start a new line.

.tag {
  display: inline;
  color: #0b7cff;
}

display: inline-block

inline-block lets an element sit inline while still accepting width and height like a box.

.badge {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
}

display: none

display: none removes an element from the layout, so it takes no space.

.mobile-only {
  display: none;
}

display: none vs visibility: hidden

visibility: hidden hides the element visually but keeps its layout space. display: none removes its layout box.

.hidden-box {
  visibility: hidden;
}

.removed-box {
  display: none;
}

What does position do?

The position property changes how an element is placed and whether offset properties such as top, right, bottom and left affect it.

.notice {
  position: relative;
  top: 4px;
}

position: static

static is the normal default positioning for most elements. Offset properties do not move a statically positioned element.

.card {
  position: static;
}

position: relative

A relatively positioned element stays in normal flow, but can be visually offset from its original position. It also commonly establishes the containing block for absolutely positioned descendants.

.card {
  position: relative;
}

.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: absolute

An absolutely positioned element is removed from normal flow. Its position is calculated relative to its containing block, often the nearest positioned ancestor.

.card {
  position: relative;
}

.close-button {
  position: absolute;
  top: 8px;
  right: 8px;
}

position: fixed

A fixed element is generally positioned relative to the viewport and stays in the same place while the page scrolls.

.help-button {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

Fixed UI should not cover important content, especially on small screens or at high zoom.

position: sticky

A sticky element behaves like normal flow until a scroll threshold is reached, then it sticks within its scroll container.

.section-nav {
  position: sticky;
  top: 1rem;
}

Top, right, bottom and left

Offset properties position non-static elements according to their positioning context.

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Do not use many random offsets to repair a broken layout. Flexbox or Grid is usually better for normal page alignment.

The inset shorthand

inset is shorthand for top, right, bottom and left.

.overlay {
  position: absolute;
  inset: 0;
}

This stretches the positioned box to all four edges of its containing block when sizing allows.

z-index and stacking

z-index helps control which positioned or stacking-context elements appear in front of others.

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}

Stacking context: beginner idea

A stacking context is like a local layering group. Certain CSS properties such as positioned elements with a non-auto z-index, transforms, opacity below 1 and others can create new stacking contexts.

Normal flow vs positioned layout

Normal document flow should handle most content. Absolute and fixed positioning are best for overlays, badges, floating controls and similar targeted cases—not for building the entire page layout.

Accessibility and positioning

• Fixed headers content ko hide na karein.
• Zoom ke baad floating buttons text ko cover na karein.
• Visual order aur keyboard/tab order ko unnecessarily mismatch mat karo.
• Hidden content ke liye correct hiding technique choose karo.
• Focus indicator ko overlay ke peeche mat chhupne do.
• Sticky elements ko too tall mat banao on small screens.

Best practices

• Normal flow ko default rakho.
• Absolute child ke liye intentional positioned parent define karo.
• Layout repair ke liye random top/left offsets avoid karo.
• z-index scale consistent rakho instead of huge arbitrary numbers.
• Fixed and sticky UI ko mobile + zoom par test karo.
• DevTools me containing block and stacking context inspect karo.

Common beginner mistakes

• inline element par width/height expect karna.
• display: none aur visibility: hidden ko same samajhna.
• Absolute child ka reference parent set na karna.
• Entire layout absolute positioning se banana.
• Sticky element ke saath top offset bhoolna.
• Every z-index problem ko giant number se solve karna.
• Fixed element se page content cover kar dena.