Question 366121 in Html Question posted in
Some basic documentation can be found here.

Html – How do I force css grid items to overlap each other?

I have a row of 5 columns, each holding a red box with some text. When the user shrinks the screen sideways, I want the container to shrink sideways, and I want the boxes to start overlapping each other, so that the text in the boxes are still fully visible.
Not sure how to achieve this, I’ve tried changing the side margins of the boxes to negative but that doesn’t seem to work too well.

.container {
  width: 100%;
  height: 100px;
  border: 1px solid brown;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.playerRow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  
  display: flex;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 0.45em;
}

.playerBox {
  width: 150px;
  height: 100px;
  background-color: red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.playerBox:nth-child(1),
.playerBox:nth-child(3),
.playerBox:nth-child(5)
{
  align-items: flex-end;
}
<div class="container">
  <div class="playerRow">
    <div class="playerBox onTop">user 1 ahhahah</div>
    <div class="playerBox onTop">user 2 ahhahah</div>
    <div class="playerBox onTop">user 3 ahhahah</div>
    <div class="playerBox onTop">user 4 ahhahah</div>
    <div class="playerBox onTop">user 5 ahhahah</div>
  </div>
</div>

https://codepen.io/MH-123/pen/vYMJoZR

Tags:

2

Answers


  1. 0

    One way is to calculate where each box is to be and position them absolute.

    Here’s a simple example.

    .container {
  width: 100%;
  height: 100px;
  border: 1px solid brown;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.playerRow {
  width: 100vw;
  position: relative;
  height: 100px;
  --gap: calc((100vw - (5 * 150px)) / 10);
}

.playerBox {
  width: 150px;
  height: 100px;
  background-color: #ff000008;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: calc((var(--n) - 1) * 20%);
  left: calc((var(--gap) * var(--n)) + ((var(--n) - 1) * (150px + var(--gap))));
}

.playerBox:nth-child(1) {
  --n: 1;
}

.playerBox:nth-child(2) {
  --n: 2;
}

.playerBox:nth-child(3) {
  --n: 3;
}

.playerBox:nth-child(4) {
  --n: 4;
}

.playerBox:nth-child(5) {
  --n: 5;
}

.playerBox:nth-child(1),
.playerBox:nth-child(3),
.playerBox:nth-child(5) {
  align-items: flex-end;
}
    <div class="container">
  <div class="playerRow">
    <div class="playerBox onTop">user 1 ahhahah</div>
    <div class="playerBox onTop">user 2 ahhahah</div>
    <div class="playerBox onTop">user 3 ahhahah</div>
    <div class="playerBox onTop">user 4 ahhahah</div>
    <div class="playerBox onTop">user 5 ahhahah</div>
  </div>
</div>

    You may want to add a re-setting of the widths (to less than 150px) for when the viewport width gets too small and the overlaps interfere with the text too much.

    Login or Signup to reply.
  2. 0

    You need to add an extra element to the .playerBox and set a width to it.
    Something like this:

    .container {
  border: 1px solid brown;
}

.playerRow {
  height: 100px;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.playerBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  background-color: red;
}

.playerBox span {
  width: 150px;
  flex: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 6;
  margin: 0 4px;
}

.playerBox:nth-child(odd) span {
  align-items: flex-end;
}
    <div class="container">
  <div class="playerRow">
    <div class="playerBox onTop"><span>user 1 ahhahah</span></div>
    <div class="playerBox onTop"><span>user 2 ahhahah</span></div>
    <div class="playerBox onTop"><span>user 3 ahhahah</span></div>
    <div class="playerBox onTop"><span>user 4 ahhahah</span></div>
    <div class="playerBox onTop"><span>user 5 ahhahah</span></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search