Question

我为此感到挣扎。我有一个带有阴影的标头，其下有一个内容div。除非内容div的z-index值为-1，否则阴影不会显示，但是我无法单击内容div中的任何元素。我想念什么？

.container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
  z-index: -1;
  position: relative;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

codepen

Answer 1

增加标题的z-index而不是减少内容之一：

.container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
  z-index:1;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

或将z-index:0添加到容器中，以将.body保留在其堆叠上下文中，并避免其位于容器后面（您面临的问题）¹

.container {
  display: flex;
  flex-direction: column;
  position:relative;
  z-index:0;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
  z-index:-1;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

要更好地了解最初的问题，只需在容器中添加背景，您就会注意到.body的位置：

.container {
  display: flex;
  flex-direction: column;
  background:yellow;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
  z-index:-1;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

¹：对于具有“ z-index：auto”的用户，将其视为如果它创建了一个新的堆栈上下文，但是有任何后代实际创建新堆栈上下文的子孙应该 考虑了父级堆栈上下文的一部分，而不是这个新的。^ref

Answer 2

从标头和正文中删除z-index，并从position:relative到body删除header

.container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  -webkit-box-shadow: 5px 10px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 10px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 10px 0px 0px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
  position: relative;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

Answer 3

通过使用具有较大值的z索引元素，始终位于具有较小值的元素之前。

与其给主体赋予-1而不是鼓励这样做，不如给您的div赋予更高的z索引值

.header
{
  ......
  ......
  z-index:1;
 }
 body
 {
  .......
  .......
      z-index:0; /* NOT IMPORTANT THOUGH IF YOU'RE NOT MESSING WITH -ve Z indexes
 }

Answer 4

为什么不尝试z-index：1;在标题

中

769983341

如何正确使用阴影盒？

4 个答案: