时间戳

首页 > 解决方案 > 父视图的阴影消失了

html - 父视图的阴影消失了

问题描述

div嗨，当将孩子移动到sticky父母下方时，我面临着阴影消失的问题div。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html, body{

         min-height: 100% !important;
        }

        body{

            margin: 0;
            background-color: #470c77;
        }

        .header{

            width:  100%;
            height: 50px;
            background-color: rgb(238, 238, 238);
            box-shadow: 0px 0px 6px 2px #000000;

            position: sticky;
            top: 0;
        }

        .view{

            width: 100%;
            height:25%;
            background-color: rgb(255, 255, 255);
            position: fixed;
            top: 50px;
            z-index: 0;
        }
    </style>
</head>
<body>
     <div class="header">
         <!-- TODO:- Some elements here -->
         <div class="nav">
             <!-- TODO:- Some Elements Here -->
             <div class="view">

             </div>
         </div>
     </div>
</body>
</html>

主要问题是阴影从nav. 如果我做到top: 50px;了，view那么阴影就会出现。但身体的背景颜色也可见。

当前布局： 在此处输入图像描述

预期布局：

在此处输入图像描述

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

标签： htmlcss

解决方案

尝试这个：

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html, body{

         min-height: 100% !important;
        }

        body{

            margin: 0;
            background-color: #470c77;
        }

        .header{

            width:  100%;
            height: 50px;
            background-color: rgb(238, 238, 238);
            -webkit-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
			-moz-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
			box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
            position: sticky;
            top: 0;
        }

        .view{

            width: 100%;
            height:25%;
            background-color: rgb(255, 255, 255);
            position: fixed;
            top: 50px;
            z-index: 0;
        }
    </style>
</head>
<body>
     <div class="header">
         <!-- TODO:- Some elements here -->
         <div class="nav">
             <!-- TODO:- Some Elements Here -->
             <div class="view">

             </div>
         </div>
     </div>
</body>
</html>

要隐藏背景，您可以增加.view height

推荐阅读