关于absolute其父元素的问题

来源：2-12 汉克狗最终动画效果

WHIPLASH_z

2019-03-29 17:57:38

<body>
	<div class="sky">
		<div class="cloud"></div>
		<div class="cloud"></div>
		<div class="cloud"></div>
		<div class="cloud"></div>
		<div class="cloud"></div>
	</div>
	<div class="lawn">
		<div class="rabit"><img src="src/rabbit.png"></div>
	</div>

.lawn{background:linear-gradient(0deg,rgb(148, 190, 89),transparent);
width: 100%;
height: 40%;
position: relative;
}
.cloud{
	width:150px;
	height:60px;
	background-color: #fff;
	position: absolute;
	top:20px;
	left:50%;
	border-radius: 50%;
	border: none;
	opacity: 1;
	animation: translate 10s linear infinite ;
}
.cloud:before{
	content:"";
	width:150px;
	height:80px;
	background-color: #fff;
	position: absolute;
	top:20px;
	left:50%;
	border-radius: 50%;
	border: none;
	transform:rotate(50deg) translate(-85px,53px) scale(0.5,.8);
}
.cloud:after{
	content: "";
	width:86px;
	height:86px;
	background-color: #fff;
	position: absolute;
	top:20px;
	left:50%; 
	border-radius: 50%;
	border: none;
	transform:translate(-23px,-43px);
}

.cloud:nth-of-type(2){
	position: absolute;
	animation: translate 9s linear infinite ;
	transform: scale(.9) translate(-1000px,100px);
	opacity: .7;
}
.cloud:nth-of-type(3){
	position: absolute;
	animation: translate 12s linear infinite ;
	transform: scale(1.2) translate(-400px,40px);
	opacity: .4;
}
.cloud:nth-of-type(4){
	position: absolute;
	animation: translate 11s linear infinite ;
	transform: scale(.72) translate(500px,80px);
	opacity: .9;
}
.cloud:nth-of-type(5){
	position: absolute;
	animation: translate 13s linear infinite ;
	transform: scale(.8) translate(1000px,20px);
	opacity: .6;
}

.rabit{
	position: absolute;
	right: 0px;
	bottom:0px;
	transform: scale(.1);
}

为什么此时的 .rabit不是根据.lawn来进行相对定位的呢（我根本不清楚他是根据哪个元素进行相对定位的- -）

写回答

2回答