Html 父视图的阴影消失了

嗨，我面临的阴影消失问题时，移动子div到下面的粘性父div

代码：

主要问题是阴影从导航中消失。如果我做了top:50px；若要查看，将显示阴影。但身体的背景色也是可见的

当前布局：

预期布局：

请帮助我仅使用CSS解决此问题。

尝试以下方法：

文件 html，正文{ 最小高度：100%！重要； } 身体{ 保证金：0； 背景色：470c77； } .标题{ 宽度：100%； 高度：50px； 背景色：RGB238238238； -webkit盒阴影：插入0-7px 3px-5px rgba0,0,0.65； -moz盒阴影：插入0-7px 3px-5px rgba0,0,0.65； 盒影：插入0-7px 3px-5px rgba0,0,0,0.65； 位置：粘性； 排名：0； } .视图{ 宽度：100%； 身高：25%； 背景色：rgb255、255、255； 位置：固定； 顶部：50px； z指数：0； } 试试这个：

文件 html，正文{ 最小高度：100%！重要； } 身体{ 保证金：0； 背景色：470c77； } .标题{ 宽度：100%； 高度：50px； 背景色：RGB238238238； -webkit盒阴影：插入0-7px 3px-5px rgba0,0,0.65； -moz盒阴影：插入0-7px 3px-5px rgba0,0,0.65； 盒影：插入0-7px 3px-5px rgba0,0,0,0.65； 位置：粘性； 排名：0； } .视图{ 宽度：100%； 身高：25%； 背景色：rgb255、255、255； 位置：固定； 顶部：50px； z指数：0； }

---

所以基本上，阴影没有被移除或消失，只是它隐藏在.view div下。下面是你要做的，移除标题上的框阴影，因为它是隐藏的，添加更新你的.view div的背景。请参阅下面的代码：

html，正文{ 最小高度：100%！重要； } 身体{ 保证金：0； 背景色：470c77； } .标题{ 宽度：100%； 高度：50px； 背景色：RGB238238238； 位置：粘性； 排名：0； } .视图{ 宽度：100%； 身高：25%； 背景：底部线性梯度，999 0，fff 7px，fff 100%； 位置：固定； 顶部：50px； z指数：0； } 文件

---

所以基本上，阴影没有被移除或消失，只是它隐藏在.view div下。下面是你要做的，移除标题上的框阴影，因为它是隐藏的，添加更新你的.view div的背景。请参阅下面的代码：

html，正文{ 最小高度：100%！重要； } 身体{ 保证金：0； 背景色：470c77； } .标题{ 宽度：100%； 高度：50px； 背景色：RGB238238238； 位置：粘性； 排名：0； } .视图{ 宽度：100%； 身高：25%； 背景：底部线性梯度，999 0，fff 7px，fff 100%； 位置：固定； 顶部：50px； z指数：0； } 文件

---

如果您想要实现一个粘性元素的框阴影，那么您需要使用：after pseudo类并在那里给出阴影

  .header:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 7px;
      left: auto;
      width: 100%;
      top: 0;
      box-shadow: 0px 0px 6px 2px #000000;
  }

并修改标题类css，如下面的代码段所示

html，正文{ 最小高度：100%！重要； } 身体{ 保证金：0； 背景色：470c77； } .标题{ 宽度：100%； 高度：50px； 背景色：RGB238238238； 位置：粘性； 排名：0； } .标题：之后{ z指数：-1； 位置：绝对位置； 内容：； 底部：7px； 左：自动； 宽度：100%； 排名：0； 盒影：0px 0px 6px 2px 000000； } .视图{ 宽度：100%； 身高：25%； 背景色：rgb255、255、255； 位置：固定； 顶部：50px； z指数：0； }

---

如果您想要实现一个粘性元素的框阴影，那么您需要使用：after pseudo类并在那里给出阴影

  .header:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 7px;
      left: auto;
      width: 100%;
      top: 0;
      box-shadow: 0px 0px 6px 2px #000000;
  }

并修改标题类css，如下面的代码段所示

html，正文{ 最小高度：100%！重要； } 身体{ 保证金：0； 背景色：470c77； } .标题{ 宽度：100%； 高度：50px； 背景色：RGB238238238； 位置：粘性； 排名：0； } .标题：之后{ z指数：-1； 位置：绝对位置； 内容：； 底部：7px； 左：自动； 宽度：100%； 排名：0； 盒影：0px 0px 6px 2px 000000； } .视图{ 宽度：100%； 身高：25%； 背景色：rgb255、255、255； 位置：固定； 顶部：50px； z指数：0； }

---

你是说像这样@马尼拉穆鲁根，是的。您的解决方案非常有效！非常感谢。我已经添加了相关细节作为答案，如果它解决了您的问题，请随意接受。您的意思是这样吗@马尼拉穆鲁根，是的。您的解决方案非常有效！非常感谢。我已经添加了相关细节作为答案，如果它解决了您的问题，请随意接受。无论如何，谢谢您打开header over。view？@MountAin只需将.view类作为header类的兄弟，然后添加header类z-index:1；。。。。由于视图是header的子级，因此无法将header带到view类上。查看此代码笔供您查看：或者该视图确实需要是header的子视图吗？上述解决方案由Maniraj提供。谢谢你的努力是的，没问题谢谢，无论如何，把标题带过来。查看？@MountAin只需将.view类作为标题类的兄弟类，然后添加标题类z-index:1；。。。。由于视图是header的子级，因此无法将header带到view类上。查看此代码笔供您查看：或者该视图确实需要是header的子视图吗？上述解决方案由Maniraj提供。谢谢你的努力是的，没问题