flexbox - 我的侧边栏落后于内容，网页失去响应能力
问题描述
我是新手。所以，我尝试将 CSS 卡片放在有侧边栏的页面上。我使用了 Html & CSS flexbox。首先，我分别制作了它们，它们非常好并且反应灵敏。当我尝试将两者合并到一个页面中时，卡片出现在导航栏的前面，并且页面整体也失去了响应能力，因为卡片失去了它们的形式。那么，我该如何解决这个问题呢？
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>解决方案
简化的规则是 HTML 文件中的元素将按照它们出现的顺序创建。如果元素重叠，则新元素将绘制在旧元素之上。
这就是这里的问题。创建导航，然后创建主要内容。因此，当它们重叠时，主要内容优先。
我们可以通过覆盖订单来改变这种行为。我们通过 CSS 使用z-index属性来做到这一点。具有较高 z-index 的项目将被绘制在具有较低 z-index 的项目上。通常的方法是将 z-index 设置得非常高（例如 10000），以便具有该 z-index 的元素会出现在其他所有元素之上。
唯一的变化是我添加z-index: 10000;了.navbar：
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
z-index: 10000;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>第二个问题是关于处理不同的屏幕尺寸。最好的方法是通过CSS 媒体查询。这些允许您向 CSS 文件添加一组规则，只有在它们符合您的条件时才会处理这些规则。
例如，如果您想在页面宽度为 700 像素或更窄的情况下运行某些规则，您可以这样做：
@media (max-width: 700px) {
.cardcont {
background-color: black;
}
}
你可以有多个媒体查询，每一个都可以有多个条件。媒体查询通常放在 CSS 文件的末尾，因为这样可以覆盖之前的规则。
我建议您使用这些来更改小尺寸的页面。示例更改为：
- 从 中删除边距
.cardcont。 - 将导航移至页面顶部。
推荐阅读
- jenkins - Jenkins 错误：“未知阶段部分“阶段”。从版本 0.5 开始，阶段中的步骤必须位于“步骤”块中
- c++ - 在 STARTLS 之后我应该发送什么？
- python - 产品销售的 Python 动态规划
- python - 是否可以同时使用 Python 2 和 Python 3 创建 PubSub 设置？
- r - 从 dply 链中的 lm 中提取 R^2，而不是 attributes(mylm)$adj.rsquared
- python - 文件中的行作为函数的单独字符串
- c++ - 从给定字符串中删除重复项（不对其进行排序）
- shell - 管道'|' 我的 ansible 脚本似乎不喜欢
- javascript - 渲染leaflet.js 地图时出现类型错误
- javascript - （已关闭）TypeError: fetch is not a function，我做错了什么？