I am trying to build my first calculator can anyone explain to me why the green circle doesn’t display on the background like the red and orange ones.
Code:
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap');
* {
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
/* font-weight: 400; */
/* font-size: 62.5%; */
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient( 189.7deg, rgba(0, 0, 0, 1) -10.7%, rgba(53, 92, 125, 1) 90.8%);
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
background: linear-gradient(#b91372 10%, #6b0f1a 90%);
clip-path: circle(18% at 28% 34%);
}
body::after {
content: "";
position: absolut;
}
<!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" />
<link rel="stylesheet" href="/css/style.css" />
<title>Calculator By B-4C</title>
</head>
<body>
<div class="container">
<div class="ball-1"></div>
<div class="ball-2"></div>
<form class="calculator" name="calc">
<div class="screen">
<input type="text" name="txt" id="value" />
<div class="previous-operand"></div>
<div class="current-operand"></div>
</div>
<span class="num" onclick="document.calc.txt.value"></span>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
I am trying to create a design where a green circle appears in the background behind a red and an orange circle. I have attempted to use the z-index property in CSS to achieve this, but it does not seem to be working as expected.
2
Answers
You have green ball i.e.
.ball-1
inside.container
which hasoverflow: hidden
property, which is hiding the ball.To fix this, move
<div class="ball-1"></div>
outside of<div class="container">
here is the jsfiddle.
It may solve your problem.