为什么top设置百分比会不起作用呢？
<!DOCTYPE html>
<html lang="en">
<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>打怪</title>
<style>
body{
position: relative;
}
.blood{
width: 600px;
height: 20px;
border: 6px solid black;
border-radius: 20px;
position: absolute;
left: 50%;
top: 5%;
transform: translate(-50%,0);
}
.line{
width: 600px;
height: 20px;
border-radius: 20px;
background-color: red;
}
img{
width: 600px;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%,0);
}
</style>
</head>
<body>
<div class="blood">
<div class="line"></div>
</div>
<img src="史莱姆.jpg" alt="">
</body>
</html>6
收起
正在回答
2回答
同学你好，因为body元素的宽度是默认撑满一整行的。（因为电脑的分辨率不同，宽度也是不同的）（top值不生效仅限于单位是设置百分比，设置px就可以的）
同学可以查看下并测试下，如果帮助到了你，欢迎采纳~祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星