老师relative设置right属性问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .test{
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
    right: 0px;
    top: 0px;
    }
  </style>
</head>
<body>
  <div class="test"></div>
</body>
</html>

老师设置相对定位后。left：10px top：10px ，结果是距离左侧10个像素，距离上面10个像素，也就是块像右移动了。

那么我设置right：100px,top：100px 最后的结果不是应该这个块具体右侧100个像素，具体顶部100个像素，这个块在浏览器的右面么。为什么弄完块没了呢。如果我设置的像素小点的话，它是在左上角变小呢，没弄明白

无根鸟飞呀飞 2019-06-12

源自：CSS定位（position） 2-5 position-relative

收起

1回答

好帮手慕夭夭 2019-06-13 09:48:18

你好同学，这是因为元素设置relative不会脱离文档流。在正常的文档流中，元素默认都是从页面左上角开始显示的。此时参照的也是左上角进行移动，它可以设置距离左上角的位置。即可以设置top和left，不能设置bottom和right哦。

同学可以改为absolute试一下，此时元素脱离文档流后，就可以设置right，如下：

祝学习愉快，望采纳。

收起回答

提问者无根鸟飞呀飞 #1

老师relative为什么不能设置bottom和right呢

2019-06-13 15:11:46
好帮手慕夭夭回复提问者无根鸟飞呀飞 #2

你好同学，老师上面回复中说了哦。因为设置relative的元素不会脱离文档流。在正常文档流中，元素默认是从左上角显示的，此时参照的也是左上角进行移动，即参照可以设置top和left，不能设置bottom和right哦。这样记住就行哦

2019-06-13 16:37:01