Hi everyone, I have got a problem while playing around with one of the exercises in the curriculum.
According to my understanding, the position of the back division is fixed, meaning it is excluded from normal flow. Therefore, I expected to have the word “Star” at the top of my page. However, I cannot have the word shown no matter I place it before or after the back division. Meanwhile, the two twinkle stars are still there, and I can see the spacing after inserting the “Star”. Can someone please explain to me what’s happening here? Thanks!!
<style>
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(white, #000099, #66c2ff, #ffcccc, #ffeee6);
}
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 0%;
animation-iteration-count: infinite;
}
.star-1 {
animation-name: twinkle-1;
animation-duration: 1s;
}
.star-2 {
animation-name: twinkle-2;
animation-duration: 1s;
}
@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-2 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}
</style>
<body>
<div id="back"></div>
<h1 style="color:red">star</h1>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
</body>