Position an HTML <div> with CSS

CSS controls where a <div> appears. For most page layout, flexbox or grid is preferable to manually positioning every block. Use position when an element specifically needs relative, absolute, fixed or sticky positioning.

Relative parent and absolute child Top ↑

<div class="card">
  Card content
  <span class="badge">New</span>
</div>

.card { position: relative; }
.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

An absolutely positioned element is placed relative to its containing block. A positioned ancestor such as position: relative is a common way to establish that reference.

Position values Top ↑

• static: normal layout, the default.
• relative: remains in normal flow and can be offset.
• absolute: removed from normal flow and positioned against its containing block.
• fixed: positioned relative to the viewport in typical cases.
• sticky: switches between normal flow and a constrained stuck position.

z-index Top ↑

z-index controls stacking within stacking contexts. A very large number does not guarantee that an element will appear above everything on the page.

Use Grid or Flexbox for normal layout Top ↑

Do not reproduce an entire page with absolute top/left coordinates. That approach is fragile on different screen sizes.

Positioning demo DIV basics DIV interaction

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: