如何在另一个 div 后面的 div 中制作淡入效果,而前者不与后者重叠?
How to make a fade-in effect in a div behind another div, without the former overlapping the latter?
在淡入动画期间,蓝色 div 与红色重叠,即使红色 div 具有“position: absolute”。我怎样才能让它在蓝色 div 的淡入动画期间也位于顶部(最好只使用 css,如果不可能,用香草 javascript 代替)?
现场演示:https://jsfiddle.net/s5yvoL4z/2/#&togetherjs=4c97JQOdcD
代码:
<!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>Document</title>
<style>
.a {
background-color: red;
width: 15em;
height: 15em;
position: absolute;
margin-top: -5rem;
}
.b {
background-color: blue;
width: 15em;
height: 15em;
margin-top: 5rem;
animation: show-img 1s;
}
@keyframes show-img
{ from { opacity: 0 }
to {opacity: 1}
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
将 z-index: 1
添加到您的 .a
class,为了清洁,将 z-index: 0
添加到您的 .b
class。 position
属性影响元素的定位,但不影响它们的堆叠顺序。
.a {
background-color: red;
width: 15em;
height: 15em;
position: absolute;
margin-top: -5rem;
z-index: 1;
}
.b {
background-color: blue;
width: 15em;
height: 15em;
margin-top: 5rem;
animation: show-img 1s;
z-index: 0;
}
@keyframes show-img {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!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>Document</title>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
.a {
background-color: red;
z-index: 1;
width: 15em;
height: 15em;
position: absolute;
animation: show-img 2s;
}
.b {
background-color: blue;
position: absolute;
width: 15em;
height: 15em;
}
@keyframes show-img {
from {opacity: 1;}
to {opacity: 0;}
}
这可以通过将 z-index: 1;
添加到 .a
来实现。
在淡入动画期间,蓝色 div 与红色重叠,即使红色 div 具有“position: absolute”。我怎样才能让它在蓝色 div 的淡入动画期间也位于顶部(最好只使用 css,如果不可能,用香草 javascript 代替)?
现场演示:https://jsfiddle.net/s5yvoL4z/2/#&togetherjs=4c97JQOdcD
代码:
<!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>Document</title>
<style>
.a {
background-color: red;
width: 15em;
height: 15em;
position: absolute;
margin-top: -5rem;
}
.b {
background-color: blue;
width: 15em;
height: 15em;
margin-top: 5rem;
animation: show-img 1s;
}
@keyframes show-img
{ from { opacity: 0 }
to {opacity: 1}
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
将 z-index: 1
添加到您的 .a
class,为了清洁,将 z-index: 0
添加到您的 .b
class。 position
属性影响元素的定位,但不影响它们的堆叠顺序。
.a {
background-color: red;
width: 15em;
height: 15em;
position: absolute;
margin-top: -5rem;
z-index: 1;
}
.b {
background-color: blue;
width: 15em;
height: 15em;
margin-top: 5rem;
animation: show-img 1s;
z-index: 0;
}
@keyframes show-img {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!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>Document</title>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
.a {
background-color: red;
z-index: 1;
width: 15em;
height: 15em;
position: absolute;
animation: show-img 2s;
}
.b {
background-color: blue;
position: absolute;
width: 15em;
height: 15em;
}
@keyframes show-img {
from {opacity: 1;}
to {opacity: 0;}
}
这可以通过将 z-index: 1;
添加到 .a
来实现。