html - 如何修复 div 上的导航栏显示?
问题描述
我正在用 React 做一个个人项目,我按照教程开发了一个导航侧边栏。
在我向主页添加某种卡片之前,它运行良好。现在,代表卡片的 div 显示在导航栏上,而不是在导航栏上。
我将附上一些照片以及导航栏的代码、它的 css 以及卡片代码和 css。
导航栏js
import * as FaIcons from "react-icons/fa";
import * as AiIcons from "react-icons/ai";
import { Link } from "react-router-dom";
import { SidebarData } from "./SidebarData";
import "./Navbar.css";
import { IconContext } from "react-icons";
function Navbar() {
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
return (
<>
<IconContext.Provider value={{ color: "#fff" }}>
<div className="navbar">
<Link to="#" className="menu-bars">
<FaIcons.FaBars onClick={showSidebar} />
</Link>
</div>
<nav className={sidebar ? "nav-menu active" : "nav-menu"}>
<ul className="nav-menu-items" onClick={showSidebar}>
<li className="navbar-toggle">
<Link to="#" className="menu-bars">
<AiIcons.AiOutlineClose />
</Link>
</li>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</nav>
</IconContext.Provider>
</>
);
}
export default Navbar;
导航栏 CSS
.navbar {
background-color: #9f4650;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #9f4650;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text-last a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
margin-top: 8.5rem;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
background-color: #9f4650;
width: 100%;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 2;
}
span {
margin-left: 16px;
}
卡片JS
import React from "react";
import "./Cards.css";
function Cards() {
return (
<>
<div className="cards-wrapper">
<div className="card">
<div className="card-image"></div>
<div className="card-title">
<p></p>
</div>
</div>
<div className="card-1">
<div className="card-image"></div>
<div className="card-title-1"></div>
</div>
<div className="card">
<div className="card-image"></div>
<div className="card-title"></div>
</div>
<div className="card-1">
<div className="card-image"></div>
<div className="card-title-1"></div>
</div>
<div className="card">
<div className="card-image"></div>
<div className="card-title"></div>
</div>
</div>
</>
);
}
export default Cards;
卡片 CSS
.cards-wrapper {
display: flex;
align-items: center;
justify-content: space-evenly;
padding-top: 6rem;
}
.card {
position: absolute;
height: 500px;
width: 240px;
background-color: black;
padding-left: 100px;
z-index: 1;
}
.card-1 {
height: 500px;
width: 240px;
background-color: black;
}
我将不胜感激任何帮助!
解决方案
尝试在你的类中添加额外的属性
.navbar {
position: absolute;
z-index: 999;
left: 0;
top: 0
background-color: #9f4650;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
}
推荐阅读
- c# - 如何在我自己的类中注入 IHostingEnvironment
- ios - 即使发送(消息)成功,通知也没有到达 iOS 设备
- javascript - JavaScript 在 Visual Studio 中保持控制台窗口打开
- json - LabelledGeneric 解析无形 Json
- python - 打印全局变量后,将其附加到 for 循环中的全局列表中。为什么每个 for 循环和列表中的值不一样?
- android - 在android VolleyRequest中将Params发送到PostMethod时获得404响应
- node.js - ECONNRESET 在 node.js 中使用 sftp
- java - 从文件创建对象的数组列表
- c# - C# wmi 查询异常
- python - 没有入站节点 - Keras CNN 模型