how can I place show the circle div on top slider div? - html

Question

The problem is the circle div is not appearing. I need to show the circle div on top of everything but I can't. How can I show the circle 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

The main reason this isn't working is because of z-index - your slides have a z-index of 1 so your circle needs to have a higher z-index to appear above the slide.
Also, as you want the circle to appear in a specific location at all times, you could consider using position:absolute - it gets a bad rap sometimes but that's just because it is often used inappropriately :) It is ideal for positioning an element precisely inside a parent container - that's what it was designed for!
These are the changes:
.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;
}
Working example: (FYI This shows the circle in the same place as in your example - if this is a responsive design I assume you have other code to adjust the circle position)
.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>