Rabit position 为relative的时候，为什么位置会随着浏览器变化而变化？
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>rabit</title>
</head>
<body>
<div class="cloud1">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="cloud2">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="cloud3">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="cloud4">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="rabit lookUp">
<div class="ear center">
</div>
<div class="ear center right">
</div>
<div class="bread">
<div class="b1 center"></div>
<div class="b2 center"></div>
<div class="b3 center"></div>
</div>
<div class="bread right">
<div class="b1 center"></div>
<div class="b2 center"></div>
<div class="b3 center"></div>
</div>
<div class="head">
<div class="eye center">
<div class="pupil center"></div>
</div>
<div class="eye center right">
<div class="pupil center"></div>
</div>
<div class="nose center">
</div>
<div class="mouth center"></div>
<div class="mouth center right"></div>
</div>
<div class="body">
<div class="mainBody">
</div>
<div class="legT">
</div>
<div class="legB">
</div>
</div>
<div class="hand">
</div>
<div class="hand right">
</div>
<div class="tail center">
</div>
</div>
<style>
:root{
--t1: 15s;
--t2: 23s;
--t3: 18s;
--t4: 16s;
}
body{
width: 100%;
height: 600px;
margin:0;
padding: 0;
background: linear-gradient( #036397 0%, #00ADEF 70%, #17505B 90%) no-repeat;
}
.cloud1{
position: relative;
/* transform: scale(0.4); */
width: 212px;
height: 159px;
left: -130px;
top: 10px;
float: left;
animation: move1 var(--t1) ease-in-out infinite;
}
.cloud2{
position: relative;
width: 212px;
height: 159px;
left: -90px;
top: 2px;
/* transform: scale(0.5); */
float: left;
animation: move2 var(--t3) ease-out infinite;
}
.cloud3{
position: relative;
width: 212px;
height: 159px;
left: -180px;
top: 20px;
/* transform: scale(0.2); */
opacity: 0.4;
float: left;
animation: move3 var(--t2) ease-out infinite;
}
.cloud4{
position: relative;
width: 212px;
height: 159px;
left: -80px;
top: 10px;
/* transform: scale(0.8); */
opacity: 0.6;
float: left;
animation: move4 var(--t1) ease-out infinite;
}
.c1{
background-color: #97B6D6;
position: absolute;
width: 106px;
height: 106px;
border-radius: 50%;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
.c2{
background-color: #97B6D6;
position: absolute;
width: 106px;
height: 106px;
border-radius: 50%;
left: 0;
top: 29px;
}
.c3{
background-color: #97B6D6;
position: absolute;
width: 53px;
height: 47px;
border-radius: 50%;
left: 40px;
bottom: 5px;
}
.c4{
background-color: #97B6D6;
position: absolute;
width: 159px;
height: 106px;
border-radius: 50%;
left: 53px;
bottom: 0;
}
.center{
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
.lookUp{
position: absolute;
transform-origin: center top;
transform: rotate(45deg);
}
.rabit{
position: absolute;
bottom: 400px;
right: 300px;
}
.ear{
/* position: absolute; */
width: 22px;
height: 80px;
background: linear-gradient(to bottom, white 0%, rgb(146, 160, 186) 80%);
border-radius: 100px 100px 100px 100px / 120px 120px 320px 320px;
left:231px;
top:42px;
transform-origin: center bottom ;
transform: rotate(-15deg) scale(1.5);
}
.ear.right{
/* transform-origin: center bottom ; */
left:258px;
transform: scale(-1, 1) rotate(-15deg) scale(1.5);
}
/* .bread{
position: absolute;
} */
.bread .b1{
/* position: absolute; */
width: 42px;
height: 1.4px;
background: linear-gradient(90deg, transparent 10%, rgb(41, 41, 41) 50%, transparent 90%);
left:165px;
top:180px;
transform: translate(-5px, 0);
z-index: 2;
}
.bread .b2{
/* position: absolute; */
width: 42px;
height: 1.4px;
background: linear-gradient(90deg, transparent 10%, rgb(41, 41, 41) 50%, transparent 90%);
left:171px;
top:160px;
transform: translate(-5px, 0) rotate(30deg);
z-index: 2;
}
.bread .b3{
/* position: absolute; */
width: 42px;
height: 1.4px;
background: linear-gradient(90deg, transparent 10%, rgb(41, 41, 41) 50%, transparent 90%);
left:171px;
top:200px;
transform: translate(-5px, 0) rotate(-30deg);
z-index: 2;
}
.bread.right{
position: absolute;
transform: scale(-1, 1);
left: 480px;
z-index: 2;
}
.head{
position: absolute;
width: 110px;
height: 110px;
background-color: white;
border-radius: 60% / 80px 80px 50% 50%;
left:200px;
top:100px;
overflow: hidden;
z-index: 0;
}
.eye{
width: 25px;
height: 35px;
border-radius: 50% / 60% 60% 50% 50% ;
background-color: #737173;
top:40%;
transform: translate(-63.5px, 0) rotate(10deg);
}
.eye.right{
transform: scale(-1, 1) translate(10px, 0)rotate(10deg);
}
.pupil{
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
top: 8px;
left: 16px;
}
.nose{
width: 14px;
height: 12px;
background-color: #737173;
transform: translate(-33.5px, 0) scale(1.2);
top: 80px;
border-radius: 50% 50% 80% 80%/ 50% 50% 100% 100%;
/* border-top: 5px solid transparent;
border-bottom: 5px solid #737173;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50%; */
}
.mouth{
width: 20px;
height: 10px;
top: 90px;
border: 2px solid #737173;
border-top: none;
border-radius: 0 0 50% 50%/0 0 100% 100% ;
transform: translate(-45px, 0) scale(0.5);
}
.mouth.right{
border: 1px solid #737173;
border-top: none;
transform: scale(-1, 1) translate(28px, 0);
}
.body{
position: absolute;
transform-origin: left bottom;
width: 80px;
height: 120px;
border-radius: 70px 145% 147px 33px/ 89px 97% 158px 160px;
background: radial-gradient(circle at left center, white 30%, rgb(146, 160, 186) 98%);
top: 22px;
left: 273px;
transform: rotate(36deg) scale(0.8);
z-index: -1;
}
.hand{
position: relative;
width: 30px;
height: 56px;
background: radial-gradient( rgb(231, 236, 245) 5%, white 98%);
transform: translate(313px,124px) rotate(-14deg) scale(0.9);
border-radius: 79px 177px 159px 148px/ 92px 137px 186px 279px;
z-index: -1;
}
.hand.right{
background: radial-gradient(circle at left bottom, white 10%, rgb(146, 160, 186) 98% );
transform: translate(293px,84px) rotate(-49deg) scale(0.8);
z-index: -2;
}
.body .legT{
position: absolute;
width: 57px;
height: 73px;
top:-3px;
left:42px;
background: white;
border-radius: 34px 228px 157px 182px / 64px 218px 205px 193px;
transform: rotate(95deg);
}
.body .legB{
position: absolute;
width: 64px;
height: 22px;
top:33px;
left:71px;
background: white;
transform: rotate(80deg);
border-radius: 48px 38px 57px 27px /10% 42% 102% 15px;
}
.tail{
/* position: absolute; */
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
left: 337px;
top:48px;
background: radial-gradient(circle at left top, white 50%, rgb(146, 160, 186) 99% );
z-index: -2;
}
@keyframes move1{
0% {
transform: translate(110px, 0) scale(0.4)
}
5% {
transform: translate(220px, 0) scale(0.4)
}
55% {
transform: translate(550px, 0) scale(0.4)
}
100% {
transform: translate(1024px, 0) scale(0.4)
}
}
@keyframes move2{
0% {
transform: translate(110px, 0) scale(0.5);
opacity: 0.4;
}
5% {
transform: translate(220px, 0) scale(0.5)
}
55% {
transform: translate(550px, 0) scale(0.5)
}
100% {
transform: translate(1024px, 0) scale(0.5);
opacity: 0.2;
}
}
@keyframes move3{
0% {
transform: translate(110px, 0) scale(0.2)
}
5% {
transform: translate(220px, 0) scale(0.2)
}
55% {
transform: translate(550px, 0) scale(0.2)
}
100% {
transform: translate(1024px, 0) scale(0.2)
}
}
@keyframes move4{
0% {
transform: translate(110px, 0) scale(0.8)
}
5% {
transform: translate(220px, 0) scale(0.8)
}
55% {
transform: translate(550px, 0) scale(0.8)
}
100% {
transform: translate(1024px, 0) scale(0.8)
}
}
</style>
</body>
</html>
之前我设置 .rabit的属性为relative 的时候， 没办法让兔子定位在右下角某个角落，而会随着浏览器大小变化而变化。只有当把其属性改为absolute的时候，才能固定住。为什么呢？
正在回答
同学你好，首先我们先来了解一下相对定位和绝对定位。
相对定位是相对于自身原始的位置去定位，绝对定位是相对于父级（祖先级）设置了定位的元素去定位的，可以看下方的例子：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ddd {
width: 700px;
height: 700px;
background: #ccc;
position: relative;
}
.parent {
float: left;
margin-top: 100px;
width: 500px;
height: 500px;
background: pink;
}
.relative {
/*在同一个父级下：相对定位还是参照了自己原始位置去布局top:20px*/
position: relative;
width: 100px;
height: 100px;
background: red;
top: 20px;
}
.absolute {
/*在同一个父级下：绝对定位就参照了ddd的位置去布局top:20px*/
position: absolute;
top: 20px;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="ddd">
<div class="parent">
<div class="relative">relative</div>
<div class="absolute">absolute</div>
</div>
</div>
</body>
</html>如果帮助到了你，欢迎采纳~祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星