如何正确使用 box-shadow？ [复制]答案

【问题标题】：How to properly use box-shadow? [duplicate]如何正确使用 box-shadow？ [复制]
【发布时间】：2020-06-18 18:22:06
【问题描述】：

我正在为此苦苦挣扎。我有一个带阴影的标题，下面有一个内容 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

【问题讨论】：

标签： html css

【解决方案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

【讨论】：

谢谢！我的问题实际上是我的标题在我的代码中有position: static

【解决方案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>

【讨论】：

【解决方案3】：

通过使用 z 索引值较大的元素总是在值较小的元素之前。

应该给你的 div 一个更高的 z 索引值，而不是给 body 一个不鼓励的 -1

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

【讨论】：

【解决方案4】：

为什么你不尝试 z-index: 1;在标题中

.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;
  position: relative;
}

【讨论】：