html - 不想在导航上方显示框阴影

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        3年前关闭。
                                                                                            
                
        
这是演示：Here it is

我不想将阴影放在<nav>上方，但确实希望将阴影放在<footer>上方。

nav{
  background-color: blue;
  height: 100px;
}
main{
  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5);
  background-color: #555555;
  height: 100px;
  position: relative;
}
footer{
  background-color: yellow;
  height: 100px;
}
footer > a,
#parent{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  height: 100%;
  width: 250px;
}

<nav></nav>
<main></main>
<footer>
  <a href="#">
    <div id="parent">
      This is link
    </div>
  </a>
</footer>

最佳答案

将position: relative和z-index值添加到nav，以将其拉到main元素上方。

nav{
  background-color: blue;
  height: 100px;
  position: relative;
  z-index: 1;
}
main{
  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5);
  background-color: #555555;
  height: 100px;
  position: relative;
}
footer{
  background-color: yellow;
  height: 100px;
}
footer > a,
#parent{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  height: 100%;
  width: 250px;
}

<nav></nav>
<main></main>
<footer>
  <a href="#">
    <div id="parent">
      This is link
    </div>
  </a>
</footer>

关于html - 不想在导航上方显示框阴影，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41503394/