兔子的定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="sky">
            <div class="clouds"></div>
            <div class="clouds"></div>
            <div class="clouds"></div>
            <div class="clouds"></div>
            <div class="clouds"></div>
        </div>
        <div class="grass">
            <img src="rabbit.png">
        </div>
    </body>
</html>

*{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    height:100%;
}
 
.sky{
    width:100%;
    height:60%;
    position:relative;
    background:-webkit-linear-gradient(rgb(196, 228, 253) 40%,rgba(196, 228, 253,0));
}
.grass{
    position:relative;
    width:100%;
    height:40%;
    background:-webkit-linear-gradient(rgba(148, 190, 89,0) 20%,rgb(148, 190, 89));
}
.sky>.clouds{
    position:absolute;
    width:100px;
    height:100px;
    background:#fff;
    border-radius:50%;
}
.sky>.clouds::before{
    content:'';
    width:70px;
    height:70px;
    position:absolute;
    background:#fff;
    left:-30px;
    top:30px;
    border-radius:50%;
}
.sky>.clouds::after{
    width:90px;
    height:70px;
    position:absolute;
    background:#fff;
    content:'';
    left:50%;
    top:30%;
    border-radius:50%;
}
.sky>.clouds:nth-child(1){
    top:50px;
    left:750px;
    transform:scale(0.8,0.8);
}
.sky>.clouds:nth-child(2){
    top:10px;
    left:550px;
    transform:scale(0.7,0.7);
    opacity:0.9;
}
.sky>.clouds:nth-child(3){
    top:100px;
    left:650px;
    transform:scale(0.6,0.6);
    opacity:0.7;
}
.sky>.clouds:nth-child(4){
    top:80px;
    right:350px;
    transform:scale(0.4,0.4);
    opacity:0.5;
}
.sky>.clouds:nth-child(5){
    top:10px;
    right:250px;
    transform:scale(0.5,0.5);
}
img{
    transform:scale(0.1);
    position:absolute;
    right:200px;
    bottom:50px;
}

兔子要怎么定位啊，我的代码没问题啊，怎么兔子跑到天上了

光aaaaand影 2019-05-29

源自：项目：CSS3实现汉克狗 2-15 作业题

收起

1回答

樱桃小胖子回答被采纳获得+3积分 2019-05-29 17:58:24

建议给兔子设置宽度和高度，不要设置transform:scale()缩放

希望可以帮到你！

收起回答

光aaaaand影提问者 #1

请问老师为什么用scale缩放之后定位就不准确呢

2019-05-30 15:23:45
樱桃小胖子回复提问者光aaaaand影 #2

这是因为元素设置了transform属性后，会具有类似于相对定位的特性，因此会对绝对定位造成影响！

2019-05-30 15:54:52