如何使子div覆盖其在网格中的父位置？

Question

我目前正在建立自己的图形设计作品集，该作品集是基于网格的（受此概念https://codepen.io/jkantner/pen/KQPdXK的启发（帖子末尾有我的codepen，带有修改后的版本）），我正在努力可以使用某些功能，因为我绝对不是前端开发人员。

基本上，我有一系列的div，我要展示的每个项目一个，这些div分别由“ stack：nth-​​child（n）”类和整个“ card top”类引用。这些卡包含在“卡” div中，并通过应用于此“卡” div的display：grid属性创建网格。还对其应用了transform属性，以创建3D透视效果。

我的问题是，一旦活跃/专注于一切，我想做一张卡片，然后变大以详细显示其特定项目。我已经成功地使它比其他卡片更大，处于另一个位置并反转其父对象的3D效果（尽管这是一个完整的烂摊子），但无法弄清楚一旦聚焦后如何使所有卡片都放到同一位置，因为它们保留了它们在父级感应网格中的位置。

我应该如何继续为所有焦点/有源卡设置一个位置，并覆盖它们在其父级网格中的位置？

这是我的凌乱代码，尽管您可能应该在codepen上阅读它，因为由于代码段缩略图的大小，您可能会在这里看到移动版本：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;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>

</head>


<body>
  <div class="cards">
    <div class="portfolio">
      <div class="contents">
        <p>nice portfolio</p>
      </div>
    </div>
    </a>
    <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>
   


  <script src="js/index.js"></script>




</body>

</html>

Answer 1

一个html元素相对于它的第一个定位父元素。要取消在元素上的定位，您可以设置规则

position: static;