title: How to make a child div override its parent position in a grid?
body: <p>I'm currently building my own graphic design portfolio, which is grid based (inspired by this concept <a href="https://codepen.io/jkantner/pen/KQPdXK" rel="nofollow noreferrer">https://codepen.io/jkantner/pen/KQPdXK</a> (there is my codepen at the end of the post with my modified version)) and I'm struggling to get some features to work.</p>
  
  <p>I have a series of div, one per project I want to showcase, which are referred by the class <code>.stack:nth-child(n)</code> individually and by the classes <code>.card</code> and <code>.top</code> as a whole. Those cards are contained in the <code>.cards</code>-div with <code>display: grid</code> property applied. A transform property is also applied to it to create the 3D-perspective effect.</p>
  
  <p>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.</p>
  
  <h3>How should I proceed to set one position for all focus/active cards and overriding their position in their parent's grid ?</h3>
  
  <p>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: <a href="https://codepen.io/Goo_m_Ba/pen/gdqGrP" rel="nofollow noreferrer">https://codepen.io/Goo_m_Ba/pen/gdqGrP</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt;= origOffsetY ? $stickyBlock.classList.add('sticky') :
      $stickyBlock.classList.remove('sticky');
  }
  
  document.addEventListener('scroll', onScroll);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *: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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cards"&gt;
    &lt;div class="portfolio"&gt;
      &lt;div class="contents"&gt;
        &lt;p&gt;nice portfolio&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="stack" href="#"&gt;
      &lt;div class="card top"&gt;
        &lt;div class="contents"&gt;
          &lt;p id="projets"&gt;1 NOM DU PROJET &lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card shadow"&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a class="stack" href="#"&gt;
      &lt;div class="card top"&gt;
        &lt;div class="contents"&gt;
          &lt;p id="projets"&gt;NOM DU PROJET &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card shadow"&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a class="stack" href="#"&gt;
      &lt;div class="card top"&gt;
        &lt;div class="contents"&gt;
          &lt;p id="projets"&gt;NOM DU PROJET &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card shadow"&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a class="stack" href="#"&gt;
      &lt;div class="card top"&gt;
        &lt;div class="contents"&gt;
          &lt;p id="projets"&gt;NOM DU PROJET &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card shadow"&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a class="stack" href="#"&gt;
      &lt;div class="card top"&gt;
        &lt;div class="contents"&gt;
          &lt;p id="projets"&gt;NOM DU PROJET &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card shadow"&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a class="stack" href="#"&gt;
      &lt;div class="card top"&gt;
        &lt;div class="contents"&gt;
          &lt;p id="projets"&gt;NOM DU PROJET &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card shadow"&gt;&lt;/div&gt;
    &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>