CSS z-index 和 box-shadow 裁剪问题

Question

body {
  background-color: gray;
}

h1 {
  color: white;
  text-align: center;
}

nav {
  margin: 30px;
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 15px;
  min-height: 150px;
  margin: 0 1px;
  transition: all 0.3s ease-out;
  background-color: white;
  /* adding z-index here makes shadow on the right side to dissapear */
  z-index: 1;
}

li:hover {
  box-shadow: 0px 0px 65px -26px rgba(0, 0, 0, 0.75);
  transform: scale(1.09);
  /* if using z-index on hover it has overlap at the end
    z-index: 1; */
}

nav>span {
  position: absolute;
  left: calc(50% - 50px / 2);
  background: white;
  width: 50px;
  margin: 0 auto;
  box-shadow: inset 0px 6px 5px 0px grey;
  height: 22px;
  transition: all 0.3s ease;
}

nav>span:hover {
  cursor: pointer;
  height: 28px;
  margin-bottom: -3px;
  box-shadow: inset 0px 3px 5px 0px grey;
}

<nav>
  <ul>
    <li>item1</li>
    <li>hover me <br/>check box shadow on right side is missing because of z-index:1</li>
    <li>i want this item to be over the tiny square always but also with box shadow on right side working</li>
    <li>item4</li>
    <li></li>
  </ul>
  <span>
    
  </span>
</nav>
<h1>
  Some fake text which must not move, hence the little square is positioned absolute
</h1>

<p>
  1. Try removing z-index from li <br/> 2. Try having z-index on li hover only
</p>

JS Fiddle link

我想要实现的是中间方框的悬停效果，加上框阴影工作。

出于某种原因如果我对所有大框使用 z-index:1，框阴影会在右侧被剪裁. （见图）

我添加 z-index:1 的原因是为了让中间的框保持在它下面的小方块之上，它本身就是 position: absolute。

小盒子定位原因：absolute；是在鼠标悬停时不将任何文本移动到其下方。

约束是：

使小白框始终出现在带有阴影的大框后面。
确保阴影在两侧都正常工作。
确保将鼠标悬停在小白框上时，它的高度会增加，不会移动其下方的任何元素。

Answer 1

增加 hover 的 z-index 值：

li:hover {
    box-shadow: 0px 0px 65px -26px rgba(0, 0, 0, 0.75);
    transform: scale(1.09);
    z-index: 2;
}

Answer 2

尝试从 li 中删除 z-index 并应用双 box-shadow。您可以根据需要调整模糊、扩散和颜色。

body {
  background-color: gray;
}

h1 {
  color: white;
  text-align: center;
}

nav {
  margin: 30px;
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 15px;
  min-height: 150px;
  margin: 0 1px;
  transition: all 0.3s ease-out;
  background-color: white;
  /* adding z-index here makes shadow on the right side to dissapear */
  /* z-index: 1; */
}

li:hover {
  box-shadow: -11px -8px 20px 2px black, 3px 5px 20px 14px black;
  transform: scale(1.09);
  z-index: 1;
  
  /* if using z-index on hover it has overlap at the end
    z-index: 1; */
}

nav>span {
  position: absolute;
  left: calc(50% - 50px / 2);
  background: white;
  width: 50px;
  margin: 0 auto;
  box-shadow: inset 0px 6px 5px 0px grey;
  height: 22px;
  transition: all 0.3s ease;
  z-index: 0;
}

nav>span:hover {
  cursor: pointer;
  height: 28px;
  margin-bottom: -3px;
  box-shadow: inset 0px 3px 5px 0px grey;
}

<nav>
  <ul>
    <li>item1</li>
    <li>hover me <br/>check box shadow on right side is missing because of z-index:1</li>
    <li>i want this item to be over the tiny square always but also with box shadow on right side working</li>
    <li>item4</li>
    <li></li>
  </ul>
  <span>
    
  </span>
</nav>
<h1>
  Some fake text which must not move, hence the little square is positioned absolute
</h1>

<p>
  1. Try removing z-index from li <br/> 2. Try having z-index on li hover only
</p>

编辑：更改 z-index nav>spna。

Answer 3

考虑立即更改 z-index，如下所示：

body {
  background-color: gray;
}

h1 {
  color: white;
  text-align: center;
}

nav {
  margin: 30px;
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 15px;
  min-height: 150px;
  margin: 0 1px;
  transition: all 0.3s ease-out;
  background-color: white;
  /* adding z-index here makes shadow on the right side to dissapear */
  z-index: 1;
}

li:hover {
  box-shadow: 0px 0px 5px 6px rgba(0, 0, 0, 0.75);
  transform: scale(1.09);
  z-index: 2;
  transition: all 0.3s ease-out,z-index 0s 0s;
}

nav>span {
  position: absolute;
  left: calc(50% - 50px / 2);
  background: white;
  width: 50px;
  margin: 0 auto;
  box-shadow: inset 0px 6px 5px 0px grey;
  height: 22px;
  transition: all 0.3s ease;
}

nav>span:hover {
  cursor: pointer;
  height: 28px;
  margin-bottom: -3px;
  box-shadow: inset 0px 3px 5px 0px grey;
}

<nav>
  <ul>
    <li>item1</li>
    <li>hover me <br/>check box shadow on right side is missing because of z-index:1</li>
    <li>i want this item to be over the tiny square always but also with box shadow on right side working</li>
    <li>item4</li>
    <li></li>
  </ul>
  <span>
    
  </span>
</nav>
<h1>
  Some fake text which must not move, hence the little square is positioned absolute
</h1>

<p>
  1. Try removing z-index from li <br/> 2. Try having z-index on li hover only
</p>

CSS z-index 和 box-shadow 裁剪问题

CSS z-index and box-shadow clipping problem

html

css

z-index