Partially overlap elements using CSS

Question

I'd like to partially overlap multiple HTML elements - say DIVs - as in the below image. The black-bordered rectangles (Hanafuda cards) represent the elements I want to overlap.

enter image description here

With Javascript I'm sure I could come up with something, but I'd like to know if there's a pure CSS solution. I considered relative positioning but the problem is that each card needs a bigger and bigger offset along the x-axis.

Ideally I'd like the degree of overlap to depend on how much space there is, so that the elements crowd together more when cramped, but that's secondary and I don't mind using JS to accomplish it.

I can only think of CSS preprocessor or nested tags without JS. — Stickers
– Stickers, Commented Jun 30, 2015 at 2:21
You can do this using absolute positioning, overflow values and z-index. Depending on specifics, media queries might be able to handle the changing of the degree of overlap. — Brian
– Brian, Commented Jun 30, 2015 at 2:22
The first requirement (just overlapping) can be done just with negative margins and display: inline-block — vals
– vals, Commented Jun 30, 2015 at 16:59

misterManSam · Accepted Answer · 2015-06-30 02:43:43Z

6

You can achieve that using flex, making all cards except the last one adjust to the remaining space

Here is a fiddle of the below:

.container {
  display: flex;
  width: 300px;
}
.card-container {
  flex: 1 0 0;
  overflow-x: hidden;
}
.card-container:last-child {
  flex: 0 0 auto;
}
.card {
  background: linear-gradient(to right, #ccc 0%, #444 100%);
  width: 100px;
  height: 150px;
}

<div class="container">
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
</div>

edited Jun 30, 2015 at 2:43

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

answered Jun 30, 2015 at 2:33

y34h

1,6591 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

misterManSam Over a year ago

Watch out for flex compatibility, but this works nicely and the overlap changes with the parent width if desired.

Happy John Over a year ago

How can I add a padding/margin/gap between the cards that disappears as the cards overlap?

misterManSam · Accepted Answer · 2015-06-30 02:58:00Z

This can also be achieved using display: table, which currently enjoys greater browser compatibility over the newer, and wonderful, flex specification.

Compatibility: IE8+ and all modern browsers.

The outer div is given display: table
Each image is wrapped in a div with display: table-cell
table-layout: fixed allows the "cells" to overlap
The outer div can be kept flexible to allow the images to overlap more / less depending on the space they left with

Full Example

.cards {
  display: table;
  table-layout: fixed;
  width: 50%;
  max-width: 700px;
}
.cards > div {
  display: table-cell;
  width: 100px;
}
.cards > div > img {
  display: block;
}

<div class="cards">
  <div><img src="http://www.placehold.it/200x300" /></div>
  <div><img src="http://www.placehold.it/200x300/FF0000" /></div>
  <div><img src="http://www.placehold.it/200x300" /></div>
  <div><img src="http://www.placehold.it/200x300/FF0000" /></div>
</div>

Nathan Hanna · Accepted Answer · 2021-01-19 03:39:20Z

0

I found that the simplest solution was to use float: left combined with a negative right-margin:

.card {
  --card-width: 100px;

  margin-right: calc(25px - var(--card-width));
  float: left;
  
  width: var(--card-width);
  height: calc(var(--card-width) * 1.5);
  border: 1px solid black;
  background: white;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

answered Jan 19, 2021 at 3:39

Nathan Hanna

5,0433 gold badges32 silver badges33 bronze badges

Collectives™ on Stack Overflow

Partially overlap elements using CSS

3 Answers 3

2 Comments

Full Example

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Full Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related