如何将show圆形div放置在顶部滑块div上

Question

问题是圆圈div没有出现。我需要在所有内容的顶部显示圆形div，但我做不到。如何显示圆div？

.home {
height: 100vh;
overflow: hidden;
position: relative;
}
.home .slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
display: none;
padding: 0 15px;
animation: slide 2s ease;
}
.home .slide.active {
display: flex;
}
@keyframes slide {
0% {
transform: scale(1);
/*1.1*/
}
100% {
transform: scale(1);
}
}
.containers {
max-width: 1170px;
margin: auto;
}
.home .containers {
flex-grow: 1;
}
.home .caption {
width: 50%;
}
.home .caption h1 {
font-size: 42px;
color: #000000;
margin: 0;
}
.home .slide.active .caption h1 {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1s;
}
.home .caption p {
font-size: 18px;
margin: 15px 0 30px;
color: #222222;
}
.home .slide.active .caption p {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.2s;
}
.home .caption a {
display: inline-block;
padding: 10px 30px;
background-color: #000000;
text-decoration: none;
color: #ffffff;
}
.home .slide.active .caption a {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.4s;
}
@keyframes captionText {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.home .controls .prev,
.home .controls .next {
position: absolute;
z-index: 2;
top: 50%;
height: 40px;
width: 40px;
margin-top: -20px;
color: #ffffff;
background-color: #FF5722;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
transition: all .5s ease;
}
.home .controls .prev:hover,
.home .controls .next:hover {
background-color: #000000;
}
.home .controls .prev {
left: 0;
}
.home .controls .next {
right: 0;
}
.home .indicator {
position: absolute;
left: 50%;
bottom: 30px;
z-index: 2;
transform: translateX(-50%);
}
.home .indicator div {
display: inline-block;
width: 25px;
height: 25px;
color: #ffffff;
background-color: #FF5722;
border-radius: 50%;
text-align: center;
line-height: 25px;
margin: 0 3px;
}
.home .indicator div.active {
background-color: #000;
}

<section class="home">
<div class="circle" style="height: 350px; width: 350px; border: 70px solid #E5E4F0; border-radius: 50%; margin-top: -100px; margin-left: -100px;position: relative;">
</div>
<div class="slider">
<div class="slide active" style="background-image: url('img/home.jpg')">
<div class="containers">
<div class="caption">
<h1>"Title One"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('img/home1.jpg')">
<div class="containers">
<div class="caption">
<h1>"Title Two"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('img/home2.jpg')">
<div class="containers">
<div class="caption">
<h1>"Title Three"</h1>
</div>
</div>
</div>
</div>
<!-- controls  -->
<div class="controls">
<div class="prev">
<</div>
<div class="next">></div>
</div>
<!-- indicators -->
<div class="indicator">
</div>
</section>

Answer 1

这不起作用的主要原因是因为z-index-您的幻灯片的z-index为1，因此您的圆圈需要有更高的z索引才能出现在幻灯片上方。

此外，由于您希望圆始终出现在特定位置，您可以考虑使用position:absolute-它有时会受到不好的评价，但这只是因为它经常使用不当：(它非常适合将元素精确定位在父容器内-这就是它的设计目的！

这些是变化：

.circle {
height: 350px;
width: 350px;
border: 70px solid #E5E4F0;
border-radius: 50%;
/* make sure the z-index value is higher than 
all other elements you want this element to appear over */
z-index:10; 
/* set the position exactly where you want: */
position: absolute;
top: -100px;   /* these can be % values if you want it more responsive */
left: -100px;
}

工作示例：(仅供参考，这显示了与您的示例中相同位置的圆圈-如果这是一个响应设计，我假设您有其他代码来调整圆圈位置(

.circle {
height: 350px;
width: 350px;
border: 70px solid #E5E4F0;
border-radius: 50%;
/* make sure the z-index value is higher than 
all other elements you want this element to appear over */
z-index:10; 
/* set the position exactly where you want: */
position: absolute;
top: -100px;
left: -100px;
}
.home {
height: 100vh;
overflow: hidden;
position: relative;
}
.home .slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
display: none;
padding: 0 15px;
animation: slide 2s ease;
}
.home .slide.active {
display: flex;
}
@keyframes slide {
0% {
transform: scale(1);
/*1.1*/
}
100% {
transform: scale(1);
}
}
.containers {
max-width: 1170px;
margin: auto;
}
.home .containers {
flex-grow: 1;
}
.home .caption {
width: 50%;
}
.home .caption h1 {
font-size: 42px;
color: #000000;
margin: 0;
}
.home .slide.active .caption h1 {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1s;
}
.home .caption p {
font-size: 18px;
margin: 15px 0 30px;
color: #222222;
}
.home .slide.active .caption p {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.2s;
}
.home .caption a {
display: inline-block;
padding: 10px 30px;
background-color: #000000;
text-decoration: none;
color: #ffffff;
}
.home .slide.active .caption a {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.4s;
}
@keyframes captionText {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.home .controls .prev,
.home .controls .next {
position: absolute;
z-index: 2;
top: 50%;
height: 40px;
width: 40px;
margin-top: -20px;
color: #ffffff;
background-color: #FF5722;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
transition: all .5s ease;
}
.home .controls .prev:hover,
.home .controls .next:hover {
background-color: #000000;
}
.home .controls .prev {
left: 0;
}
.home .controls .next {
right: 0;
}
.home .indicator {
position: absolute;
left: 50%;
bottom: 30px;
z-index: 2;
transform: translateX(-50%);
}
.home .indicator div {
display: inline-block;
width: 25px;
height: 25px;
color: #ffffff;
background-color: #FF5722;
border-radius: 50%;
text-align: center;
line-height: 25px;
margin: 0 3px;
}
.home .indicator div.active {
background-color: #000;
}

<section class="home">
<div class="circle">
</div>
<div class="slider">
<div class="slide active" style="background-image: url('http://lorempixel.com/1000/350/animals/4')">
<div class="containers">
<div class="caption">
<h1>"Title One"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('http://lorempixel.com/1000/350/animals/3')">
<div class="containers">
<div class="caption">
<h1>"Title Two"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('http://lorempixel.com/1000/350/animals/2')">
<div class="containers">
<div class="caption">
<h1>"Title Three"</h1>
</div>
</div>
</div>
</div>
<!-- controls  -->
<div class="controls">
<div class="prev">
<</div>
<div class="next">></div>
</div>
<!-- indicators -->
<div class="indicator">
</div>
</section>