不希望在导航上方出现框阴影

Question

以下是演示：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>

Answer 1

将box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5);放入class MainActivity extends AppCompatActivity { private ListView listEvent; String arras[]={ "Logo", "name", "of", "events", "are", "present", "here" }; Drawable[] arr=new Drawable[5]; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EventList adapter = new EventList(MainActivity.this, arras); //ListView lv = (ListView)rootView. listEvent=(ListView)findViewById(R.id.listEvent); listEvent.setAdapter(adapter); } }

Answer 2

将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>