为什么top设置百分比会不起作用呢？

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!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>

胖嘘嘘 2019-08-01

源自：HTML5存储 2-5 存储实现打怪小案例

6

收起

2回答

好帮手慕言回答被采纳获得+3积分 2019-08-01 19:42:04

同学你好，因为body元素的宽度是默认撑满一整行的。（因为电脑的分辨率不同，宽度也是不同的）（top值不生效仅限于单位是设置百分比，设置px就可以的）

同学可以查看下并测试下，如果帮助到了你，欢迎采纳~祝学习愉快~

好帮手慕言 2019-08-01 10:53:54

同学你好，因为是相对于body元素进行定位。但是body元素又没有高度导致的。

建议：给body元素添加高度。

代码参考：

页面效果：

如果帮助到了你，欢迎采纳~祝学习愉快~

提问者胖嘘嘘 #1

请问老师为什么width没有设置 left却可以生效呢？

2019-08-01 17:30:31

相似问题

相对定位按百分比设置top为什么没有用，但是按百分比设置left却有用

请问relative设置偏移为百分比的效果

在百分比的设置上存疑

CSS中宽高设置百分比

浮动不起作用设置高度居中不起作用

登录后可查看更多问答，登录/注册

组件化思想开发电商网页 18版

参与学习人
提交作业 467 份
解答问题 4826 个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。

本课精华内容

问答作业

这位老师讲得太棒了！语速适中，咬字清晰，通俗易懂，深入浅出，还很亲切，满分！

0 2

所谓的异步请老师解释

1 20

请问老师关于这个疑问

0 20

老师安装问题

0 16

请问老师为什么不会执行

0 16

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号