如何修复顶部的导航栏而不被破坏？

Question

我正在使用 React 和 Tailwind CSS 开发一个作品集网站。当我设计导航栏时，我想要在它上面有悬停效果，所以我从这个codepen复制了悬停效果：

用于悬停效果的codepen

但是一旦我复制了CSS，我就相应地编辑了我的CSS。这是CSS：

.translucent {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.nav{
    color: #fff;
    padding: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.nav * {
  box-sizing: border-box;
  transition: all .35s ease;
}

.nav li {
  display: inline-block;
  list-style: outside none none;
  margin: .5em 1em;
  padding: 0;
}

.nav a {
  padding: .5em .8em;
  color: rgba(255,255,255,.5);
  position: relative;
  text-decoration: none;
  font-size: 20px;
}

.nav a::before,
.nav a::after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

.nav a::before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid #ACDDDE;
  border-right: 3px solid #ACDDDE;
  transform: translate(-100%, 50%);
}

.nav a:after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #ACDDDE;
  border-left: 3px solid #ACDDDE;
  transform: translate(100%, -50%)
}

.nav a:hover:before,
.nav a:hover:after{
  transform: translate(0,0);
  opacity: 1;
}

.nav a:hover {
  color: #fff;
}

.nav a:visited {
  color: #fff;
}

这是 jsx:

import React from "react";
import "./header.css";
import logo from "../../assets/logo.png";

const Header = () => {
    return (
        <div className="translucent flex justify-between nav items-baseline fixed">
            <div className="h-12 sm:hidden px-6">
                <img src={logo} alt="Harshal Gunjal" />
            </div>
            <div className="text-white text-2xl font-bold hidden sm:block px-6 cursor-pointer">
                Harshal Gunjal
            </div>
            <div className="px-6">
                <ul className="flex items-center justify-center gap-8">
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#home">Home</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#about">About</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#resume">Resume</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default Header;

导航栏看起来像这样：

在导航栏上应用固定标签后，它变成这样：

您可以在github中找到代码：

github源代码

如何修复顶部的导航栏而不改变它？感谢您的帮助。

我尝试更改 css 文件中的 css 而不是 tailwind 'fixed' 类，但它不起作用。我还尝试更改导航中的位置属性，但每次我更改任何内容时导航栏都会被破坏。

Answer 1

进入你的代码

<div className="translucent flex justify-between nav items-baseline fixed">

添加

top-0 left-0 mx-auto inset-x-0

结果

<div className="translucent flex justify-between nav items-baseline fixed top-0 left-0 mx-auto inset-x-0">