如何将html css导航栏放置在倾斜的渐变标题背景之上？

<div class="container">
  <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

.container {
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(45deg, #FF00FF, #00FFFF);
  transform: skewY(-10deg);
  z-index: -1;
}

.nav {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  display: flex;
}

.nav li {
  margin: 0 10px;
}

.nav li a {
  text-decoration: none;
  color: #FFF;
}