项目/元素通过导航栏剪辑

Question

因此，我试图使用CSS中的transform属性为某些元素设置一个悬停效果。就像我想象的那样。但是，不知怎么的，该元素现在正在通过导航条(它有一个fixed位置)进行裁剪。我曾试图将这个职位改为absolute，但没有任何效果。就上下文而言，

This is the element before hover

And, this is the element after hover

这是导航栏和条目的代码

​

* {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
}

nav {
  display: flex;
  background-color: #DDBFA9;
  height: 50px;
  align-items: center;
  padding: 0 20px;
}

nav h1 {
  cursor: default;
  letter-spacing: 5px;
  margin-right: 20px;
  color: white;
}

nav input {
  opacity: 0.5;
  background-color: #DDBFA9;
  border: none;
  border-radius: 0px;
  border-bottom: 2px solid white;
  box-shadow: none;
  outline: none;
  color: white;
  width: 300px;
  letter-spacing: 2px;
  transition: 300ms ease-out;
  font-size: medium;
}

nav input:hover {
  opacity: 0.6;
  transition: 300ms ease-out;
}

nav input:focus {
  background-color: #DDBFA9;
  opacity: 1;
  transition: 300ms ease-out;
}

nav input::placeholder {
  color: white;
}

nav ul {
  display: flex;
  width: 100%;
  list-style: none;
  align-items: center;
  justify-content: flex-end;
}

nav ul li a {
  text-decoration: none;
  color: white;
  margin: 0 10px;
  padding: 5px 10px;
  font-weight: 500;
  transition: 200ms ease-out;
}

nav ul li a:hover {
  color: black;
  transition: 200ms ease-out;
}

nav ul li a.sign-in {
  border: 2px solid white;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 5px 15px;
  letter-spacing: 2px;
}

nav ul li a.sign-in:hover {
  color: black;
  background-color: rgba(0, 0, 0, 0.1);
  border: 2px solid black;
}

.buy {
  text-align: center;
  margin-top: 10%;
  scroll-margin: 115px;
}

.buy h1 {
  margin-bottom: 4%;
  font-size: xX-large;
}

.seller-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.seller-box img {
  width: 250px;
  height: 400px;
}

.seller-box p.name {
  margin-top: 6%;
  font-weight: 300;
  font-size: large;
}

.seller-box p {
  font-weight: 600;
  font-size: larger;
}

.top-1,
.top-2,
.top-3 {
  margin: 0 3%;
  background: white;
  padding-bottom: 1.5%;
  color: black;
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 1px;
  transition: 250ms ease-out;
}

.top-1:hover,
.top-2:hover,
.top-3:hover {
  transform: translateX(-10px) translateY(-10px);
  transition: 250ms ease-out;
  box-shadow: rgba(0, 0, 0, 0.2) 15px 15px 15px 1px;
}

<header>
  <nav>
    <h1>PLANT.ME</h1>
    <input type="text" placeholder="Search Something...">
    <ul>
      <li><a href="#home">HOME</a></li>
      <li><a href="#buy">BUY</a></li>
      <li><a href="#blog">BLOG</a></li>
      <li><a href="#kit">DEALS</a></li>
      <li><a href="#merch">MERCH</a></li>
      <li><a href="#" class="sign-in">SIGN IN</a></li>
    </ul>
  </nav>
</header>

<article class="buy" id="buy">
  <h1>TOP SELLERS</h1>
  <div class="seller-box">
    <a href="#buy" class="top-1">
      <img src="" alt="Best Seller 1">
      <p class="name">Bonsai Tree</p>
      <p>59.99$</p>
    </a>
    <a href="#buy" class="top-2">
      <img src="" alt="Best Seller 2">
      <p class="name">Mini Cactus</p>
      <p>19.99$</p>
    </a>
    <a href="#buy" class="top-3">
      <img src="" alt="Best Seller 3">
      <p class="name">Dark Sanseviria</p>
      <p>24.99$</p>
    </a>
  </div>
</article>

​

以防万一，我还将分享项目https://roesdi-plantme-proj.netlify.app/，的链接，供任何想要检查实际操作中的“裁剪”的人使用。

Answer 1

具有非static位置的元素将得到自己指定的堆叠上下文。这就是为什么带有header的position: fixed拥有自己的堆叠上下文的原因。具有none以外的转换的元素也有自己的堆叠上下文。我相信，在hover上，您的卡片正在被转换，从而得到了一个堆叠上下文，如果没有指定z-索引，那么元素的堆叠顺序是首先分层元素，而不是在DOM顺序中堆叠上下文，然后是元素使用自己的堆叠上下文。

总之，我认为给您的header一个大于零的z-index应该可以解决这个问题。

编辑：，我现在已经尝试过了，并且将z-index: 1;添加到头中确实解决了这个问题。但是，任何更大的值都不会受到影响，因为我不认为您希望在header上添加任何内容。