How to make a child div override its parent position in a grid?

Question

I'm currently building my own graphic design portfolio, which is grid based (inspired by this concept https://codepen.io/jkantner/pen/KQPdXK (there is my codepen at the end of the post with my modified version)) and I'm struggling to get some features to work.

I have a series of div, one per project I want to showcase, which are referred by the class .stack:nth-child(n) individually and by the classes .card and .top as a whole. Those cards are contained in the .cards-div with display: grid property applied. A transform property is also applied to it to create the 3D-perspective effect.

I want to make a card, that, once active/focused, stands in front of everything and to show in details its particular project. I already succeeded in making it bigger than the others, getting it in another position and reversing the 3D-effect of its parent but I cannot figure out how to make all the cards go to the same place once focused, because they retain their position induced by the parent.

How should I proceed to set one position for all focus/active cards and overriding their position in their parent's grid ?

Here's my messy code although you probably should read it on CodePen as you'll probably see the mobile version here because of the size of the snippet thumbnail: https://codepen.io/Goo_m_Ba/pen/gdqGrP

window.addEventListener("scroll", scrollGrid);
window.addEventListener("wheel", noShakeScroll);

function scrollGrid() {
  let transY = window.pageYOffset,
    cards = document.querySelector(".cards");

  cards.style.setProperty("--scroll", transY + "px");

}
scrollGrid();

/* Without this, the `items` div erratically shakes while scrolling with wheel or touchpad. The issue still persists in Safari though… */
function noShakeScroll(e) {
  this.scrollBy(0, e.deltaY);
  e.preventDefault();
}

var $stickyBlock = document.querySelector('.portfolio');
var origOffsetY = $stickyBlock.offsetTop - 15; // 15 is your top margin

function onScroll() {
  window.scrollY >= origOffsetY ? $stickyBlock.classList.add('sticky') :
    $stickyBlock.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: 1vw;
  --cardW: 20vw;
  --cardH: 20vw;
  --cardZInc: 0.5em;
  --gap: 1.5em;
  --ttxt: 0.5em;
}

a {
  text-decoration: none;
  color: white;
}

body {
  background-image: repeating-linear-gradient(35deg, #eeeeee, #dddddd, transparent 2px, transparent 80px), repeating-linear-gradient(-35deg, #eeeeee, #dddddd, transparent 2px, transparent 80px);
  background-attachment: fixed;
  font: 1em "Open Sans", sans-serif;
  height: 100vh;
  overflow-x: hidden;
  position: sticky;
}


/* Grid */

.cards,
.stack {
  transform-style: preserve-3d;
}

.portfolio {
  text-align: center;
  font: 1em "Rubik Mono One", sans-serif;
  /* letter-spacing: 0.5em; */
  font-size: 1.1em;
  text-color: white;
  grid-template: repeat(12, calc (var(--cardH)*2)) / var(--cardW);
  z-index: 0;
  outline: 50px solid white;
  position: absolute;
  background-color: white;
  width: 100%;
  height: 40em;
  transform: translateZ(-10px);
  top: calc(-1% - var(--gap)*2);
  opacity: 1;
}

.stack .contents {
  color: #faf;
  position: relative;
}

.cards {
  --scroll: 100px;
  display: grid;
  grid-template: repeat(12 var(--cardH)) / var(--cardW);
  grid-gap: var(--gap);
  padding-bottom: calc(var(--cardH) * 3);
  position: absolute;
  transform: translate(-20%, calc(-50% + var(--scroll))) rotateX(45deg) rotateZ(45deg) translateY(calc(50% - var(--scroll)));
  z-index: 1;
}


/* Card hover */

.stack:hover .top,
.stack:focus .top {
  transition: all 0.5s;
  transform: translateZ(calc(var(--cardZInc)*4))rotateX(-20deg);
  transform-origin: center bottom;
  z-index: 2
}

.stack:nth-child(2):active .top {
  transform: translateX(calc(0px - calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}

.stack:nth-child(3):active .top {
  transform: translateX(calc(0px + calc(var(--gap) * 1) - calc(var(--cardW) * 0.5))) translateY(calc(0px + calc(var(--gap) * 4) + calc(var(--cardW) * 1))) translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}

.stack:nth-child(4):focus .top {
  transform: translateX(calc(0px + calc(var(--gap) * 0) - calc(var(--cardW) * 1.5))) translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateZ(16vw)rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}

.stack:focus .top {
  transform-origin: center bottom;
  transform: translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
  height: 70vh;
  width: 70vw;
  /*translate(-20%, calc(-50% + var(--scroll))) rotateX(45deg)
		rotateZ(45deg) translateY(calc(50% - var(--scroll)));*/
  z-index: 15;
  /*width:50vw ;
	height:50vw;*/
}

.stack:hover .shadow,
.stack:focus .shadow {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  opacity: 0.2;
  transform-origin: center bottom;
  height: 80%;
  transform: translatey(20%);
}


/* Other card styles */

.card {
  /*background-image: url(https://cdn.weasyl.com/static/media/dd/c2/45/ddc2458130dd90cf4d5f5783f14f7835cf980110df9131354325a358a3d3d60d.png);*/
  background-color: black;
  background-size: 200% 200%;
  box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2) inset;
  color: #000;
  padding: 0.75em;
  position: absolute;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
  outline: 5px solid green;
}

.top {
  transform: translateZ(10px);
  z-index: 15;
}

.shadow {
  background: #000;
  filter: blur(2px);
  -webkit-filter: blur(2px);
  opacity: 0.2;
}


/* Alter grid at breakpoints */

@media screen and (max-width: 550px) {
   :root {
    font-size: 5vw;
    --cardW: 100vw;
    --cardH: 100vw;
    --cardZInc: 10.5em;
    --ttxt: 0.5em;
  }
  .stack:hover .top,
  .stack:focus .top {
    transform: translateZ(calc(var(--cardZInc)*0))rotateX(0deg);
    transform-origin: center bottom;
  }
  .cards {
    grid-template: repeat(24, var(--cardH)) / repeat(1, var(--cardW));
    transform: translate(-0, calc(0 + var(--scroll))) rotateX(0deg) rotateZ(0deg) translateY(calc(0% - var(--scroll)));
    left: 0%;
    top: 25%;
  }
  .titre {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
    bottom: 80vh;
    left: 10px;
    white-space: nowrap;
  }
  .portfolio {
    font-size: 6vw;
    letter-spacing: 0em;
    opacity: 0;
    width: 100vw;
    top: -100px;
  }
  #dg {
    bottom: 5vh
  }
}

@media screen and (min-width: 551px) {
  #nom {
    white-space: nowrap;
    width: 100%;
  }
  #dg {
    margin-top: 10vh;
  }
  .cards {
    grid-template: repeat(16, var(--cardH)) / repeat(2, var(--cardW));
    top: 50%;
    left: 60%;
  }
   :root {
    font-size: 2vw;
    --cardW: 40vw;
    --cardH: 40vw;
    --cardZInc: 0.5em;
    --ttxt: 1em;
  }
}

@media screen and (min-width: 1050px) {
  #nom {
    white-space: normal;
  }
  #dg {
    font-size: calc(var(--ttxt) * 0.7);
    margin-top: 13vw;
  }
  .cards {
    grid-template: repeat(12, var(--cardH)) / repeat(3, var(--cardW));
    top: 35%;
    left: 60%
  }
   :root {
    font-size: 2vw;
    --cardW: 18vw;
    --cardH: 18vw;
    --cardZInc: 0.5em;
    --ttxt: 1em;
  }
}

<div class="cards">
  <div class="portfolio">
    <div class="contents">
      <p>nice portfolio</p>
    </div>
  </div>
  <a class="stack" href="#">
    <div class="card top">
      <div class="contents">
        <p id="projets">1 NOM DU PROJET </p>

      </div>
    </div>
    <div class="card shadow"></div>
  </a>
  <a class="stack" href="#">
    <div class="card top">
      <div class="contents">
        <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div>
  </a>
  <a class="stack" href="#">
    <div class="card top">
      <div class="contents">
        <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div>
  </a>
  <a class="stack" href="#">
    <div class="card top">
      <div class="contents">
        <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div>
  </a>
  <a class="stack" href="#">
    <div class="card top">
      <div class="contents">
        <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div>
  </a>
  <a class="stack" href="#">
    <div class="card top">
      <div class="contents">
        <p id="projets">NOM DU PROJET </p>
      </div>
    </div>
    <div class="card shadow"></div>
  </a>

Answer 1

A html element is relative to it's first positioned parent. To cancel positioning on an element, you can set the rule

position: static;