To achieve CSS element overlap, you need to use positioning and z-index to control the casing order. 1. Use position: relative, absolute or fixed to remove elements from normal document flow and position them; 2. Set the stacking level through the z-index attribute, the larger the value, the higher the forward, but only take effect on the positioning elements; 3. Common modes include card layout, corner badges, etc. Note that the parent container may create a new stacking context to affect the effect; 4. Simple overlap can be implemented with negative margins, such as margin-left: -20px for avatar or label stacking. Correctly understand the positioning, stacking context and z-index action mechanism to accurately control the overlapping effect.

Overlapping elements in CSS is a common layout technique used in web design—whether you're stacking images, creating card layouts, or building complex UIs. The key to overlapping lies in positioning and z-index . Here's how to do it properly.

1. Use Positioning to Move Elements

To overlap elements, at least one of them needs to be taken out of the normal document flow using position . The most common approaches:

• position: relative – shifts an element from its normal position without affecting others.
• position: absolute – positions an element relative to its nearest positioned ancestor.
• position: fixed – positions relative to the viewport (useful for overlays).

Example: Overlap with relative and absolute

 <div class="container">
  <div class="box red">Box 1</div>
  <div class="box blue">Box 2</div>
</div>

 .container {
  position: relative; /* Establishes a stacking context */
  width: 300px;
  height: 200px;
}

.box {
  width: 200px;
  height: 100px;
  position: absolute;
}

.red {
  background: red;
  top: 20px;
  left: 20px;
}

.blue {
  background: blue;
  top: 60px;
  left: 60px;
}

In this example, both boxes are positioned absolutely within a relatively positioned container, allowing them to overlap.

2. Control Stacking Order with z-index

The z-index property controls which element appears on top. Higher values appear in front.

 .red {
  z-index: 1;
}

.blue {
  z-index: 2; /* This will appear above .red */
}

? Note: z-index only works on positioned elements (ie, relative , absolute , fixed , or sticky ).

3. Common Overlapping Patterns

? Overlapping Cards (eg, Image over Text)

 .card {
  position: relative;
  width: 300px;
}

.card-img {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  z-index: 1;
}

This lifts an image slightly over the card body.

? Background Badge or Ribbon

 .ribbon {
  position: absolute;
  top: 0;
  right: -30px;
  width: 120px;
  transform: rotate(45deg);
  background: red;
  color: white;
  text-align: center;
  z-index: 2;
}

A rotated ribbon overlapping the top corner of a box.

4. Tips & Gotchas

• Always set position before using z-index .
• Watch out for stacking contexts —nested elements with z-index may not behave as expected if a parent creates its own stacking context (eg, via opacity, transform , or z-index ).
• Use negative margin as a simpler alternative for minor overlaps (see below).

Alternative: Overlap with Negative Margin

For simple cases (like inline elements), you don't need positioning:

 .overlap {
  margin-left: -20px; /* Pulls element back into the previous one */
}

Useful for avatar stacks or tags.

Basically, overlapping in CSS comes down to positioning and layering. Use position to move elements, z-index to control who's on top, and negative margin when layout flow allows. It's not complex—just pay attention to context and stacking order.

The above is the detailed content of how to overlap elements in css. For more information, please follow other related articles on the PHP Chinese website!