关于溢出隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css1.css" type="text/css">
</head>
<body>
    <div class="sky">
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
        <div class="cloud cloud4"></div>
        <div class="cloud cloud5"></div>
    </div>
    <div class="grassland">
        <img src="rabbit.png"/>
    </div>
</body>
</html>

*{
    padding:0;
    margin:0;
}
html,body{
    height:100%;

}

/*天空*/
.sky{
    /*position:relative;  !*天空设置定位时，溢出隐藏才有效，如果去除定位属性，溢出隐藏无效*!*/
    width:100%;
    height:60%;
    background:rgb(196,228,253);
    background: linear-gradient(to bottom,rgba(196,228,253,1),rgba(196,228,253,0));
    overflow:hidden;
}
/*5朵云的公共属性*/
.sky .cloud{
    position:absolute;  /*对.sky .cloud设置相对定位时，溢出隐藏才有效,如果设置绝对定位或者去除定位属性，溢出隐藏无效*/
    width:100px;
    height:100px;
    border-radius:50px;
    background:white;
}
.sky .cloud::before{
    display:block;
    content:'';
    width:50px;
    height:70px;
    border-radius:30px;
    background:white;
    transform:rotate(-30deg) translate(-40px,10px);
}
.sky .cloud::after{
    display:block;
    content:'';
    width:160px;
    height:50px;
    border-radius:30px;
    background:white;
    transform:translate(-50px,-30px);
}

/*分别设置5朵云的位移、缩放和透明度*/
.sky .cloud1{
    transform:translate(0px,0px) scale(1);
    opacity:1;
    animation:movement 10s linear 1s 3;
}
.sky .cloud2{
    transform:translate(300px,60px)  scale(0.6);
    opacity:0.6;
    animation:movement 7s linear 1s 3;
}
.sky .cloud3{
    transform:translate(400px,20px)  scale(0.7);
    opacity:0.7;
    animation:movement 7s linear 1s 3;
}
.sky .cloud4{
    transform:translate(700px,120px)  scale(0.6);
    opacity:0.6;
    animation:movement 8s linear 1s 3;
}
.sky .cloud5{
    transform:translate(1000px,70px)  scale(0.9);
    opacity:0.9;
    animation:movement 9s linear 1s 3;
}

/*定义5朵云的动画*/
@keyframes movement {
     from{
         margin-left:100%;
     }
     to{
         margin-left:-100%;
     }
 }

/*草地*/
.grassland{
    position:relative;
    width:100%;
    height:40%;
    background:rgb(148,190,89);
    background: linear-gradient(to top,rgba(148,190,89,1),rgba(148,190,89,0));
}

.grassland img{
    position:absolute;
    width:150px;
    height:150px;
    right:200px;
    bottom:50px;
}

我看老师在作业批复中是将html和body设置了overflow:hidden，但如果我对天空 .sky 设置overflow:hidden，发现设置定位时，溢出隐藏才有效，如果去除定位属性，溢出隐藏为什么就无效了？