html - i am not able to overlay the boxes using z-index
问题描述
I have tried my best to solve the issue but it's not working. I want to make a gradient border on my website for a slideshow (similar to the one on this video). I used (:before
) pseudo selector here is my HTML
code:
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
border: 2px solid red;
height: 75vh;
width: 95%;
margin: 2% auto;
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: white;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
<a href="Vaishnavi.html">Home</a>
</div>
<div class="items">
<a href="">About US</a>
</div>
<div class="items">
<a href="">Creations</a>
</div>
<div class="items">
<a href="">Help</a>
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
Please tell me the mistake I am making and why my z-index
is not working correctly. In my view, I have written the code correctly.
解决方案
Is this something that you are looking for?
You can see that I recreated the example based on this video that you have provided.
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
margin: 2% auto;
height: 75vh;
width: 95%;
background: linear-gradient(0deg, #000, #262626);
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
<a href="Vaishnavi.html">Home</a>
</div>
<div class="items">
<a href="">About US</a>
</div>
<div class="items">
<a href="">Creations</a>
</div>
<div class="items">
<a href="">Help</a>
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
What you were missing in your code to see the text was the line below:
.slide-box {
background: linear-gradient(0deg, #000, #262626);
}
The z-index
worked just fine but because your background color was white and also the text color was white, you could not see the text.
推荐阅读
- typescript - 如何使用数组值键入对象键
- apache-spark-sql - PySQL - 使用同一列中的两行计算百分比
- sql - 从多个列中删除零
- docker - 没有这样的文件或目录 package.json
- javascript - 在 DYGRAPH 中,我想在画布上(在柱形图中)永久显示所有数据点,在列的顶部?谢谢
- c# - 如何从对象列表中获取对象,这些对象列表中包含对象中另一个列表中的重复属性?
- ssis - SSIS 从 ODBC 查询结果中设置变量值
- virtual-machine - 如何提取 qcow2 虚拟磁盘映像?
- c - 在变量定义期间,自赋值有什么作用吗?
- reactjs - 在让视频录制组件在我的 React 应用程序中工作时需要帮助