老师relative设置right属性问题

老师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个像素,这个块在浏览器的右面么。为什么弄完块没了呢。如果我设置的像素小点的话,它是在左上角变小呢,没弄明白

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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

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

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

http://img1.sycdn.imooc.com//climg/5d01ab560001079407740675.jpg

祝学习愉快,望采纳。

  • 提问者 无根鸟飞呀飞 #1
    老师relative为什么不能设置bottom和right呢
    2019-06-13 15:11:46
  • 你好同学,老师上面回复中说了哦。因为设置relative的元素不会脱离文档流。在正常文档流中,元素默认是从左上角显示的,此时参照的也是左上角进行移动,即参照可以设置top和left,不能设置bottom和right哦。这样记住就行哦
    2019-06-13 16:37:01
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师