body下子元素默认相对定位的问题
来源：2-3 存储实现打怪小案例
一路向蓝
2019-04-30 16:41:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
position: relative;
transition: 0.5s;
}
.line {
width: 400px;
height: 20px;
border: 4px solid black;
position: absolute;
left: 50%;
top: 20px;
transform: translate(-50%, 0);
}
.xie {
width: 400px;
height: 100%;
background: red;
}
.guai {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="line">
<div class="xie"></div>
</div>
<img src="1.jpeg" alt="" class="guai">
<script>
var num = 0;
var timer = null;
onclick = function () {
// console.log("1")
clearInterval(timer);
timer = setInterval(function () {
// console.log("1")
document.body.style.left = Math.random() * -20 + 10 + "px";
document.body.style.top = Math.random() * -20 + 10 + "px";
num++;
if (num == 5) {
clearInterval(timer);
num = 0;
return;
}
}, 30)
}
</script>
</body>
</html>
//问题描述：
我按视频的代码 设置了body的relative ,
然后img的top：50%失效了 ，
我设置了html 和body 的heigth：100%之后就有效了
然后发掘出下面的问题：
首先请老师帮我看看 我的确是和视频中代码一样却情况不同了对吧 我是chrome浏览器
我chrome测试完是：
我这个body设置了相对定位后
body下的img 设置的top：50%就是无效了（因为他此时是相对body高度的50%） 而body高度为0
如果不设置html和body的relative 此时我body下的元素本质上相对的是<--浏览器窗口大小-->
是这样的嘛？
1回答
-
你好，视频我们会审核一下，如果有问题会尽快进行处理。
同学前面理解的没有问题，body没有高度设置了relative的话，子元素定位就会出现问题，需要给html和body设置高度为100%。
如果祖先元素没有定位的话，会相对页面区域，可以理解为视口进行定位。
祝学习愉快！
1
相似问题
回答 2