请老师解答问题
来源：2-5 编程练习
Megan1143625
2021-06-30 15:33:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.test{
width: 100px;
height: 100px;
background: red;
/*此处写代码*/
/*position:absolute;*/
position:relative;
right:200px;
bottom:100px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
为什么设为relative就不能显示红色的div呢, 如果去掉position, 红色块显示在左上角, 加上相对定位之后, 应该是相对原来的位置偏移, 但是实际并没有, 只能设置为absolute才能正常显示. 即便是给通配符的样式加上宽和高也不行.
1回答
-
好帮手慕小小
2021-06-30
同学你好
1、未对元素使用定位posotion时，单独设置left、right、bottom、top是无效的。一般left、right、top、bottom使用于配合position定位对象位置。
2、使用相对定位relative，是相对原来的位置进行移动，元素默认在左上角显示，当给元素设置right:200px;bottom:100px;时，元素向左移动200px，向上移动100px，此时元素不在窗口内部，所以会看到窗口内不显示红色的div。
3、使用绝对定位absolute，元素默认相对页面进行移动，当给元素设置right:200px;bottom:100px;时，元素距离页面右侧200px，距离页面底部100px，是在窗口内的，所以设置绝对定位时可以看到红色div在页面上显示。
祝学习愉快~0
相似问题