如何在使用fixed定位的同时把div向左移动

如何在使用fixed定位的同时把div向左移动

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

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

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

无法实现 向右移动div宽度的一半 来实现居中固定

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

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

4回答
好帮手慕小班 2020-09-01 11:12:23

同学你好,margin-right:-400px;可以理解为向右移动,比如:

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body{
    width: 100%;
    height: 100%;
  }
    .test{
     width: 800px;
     height: 100px;
     background: red;
     float: right;
     margin-right: -400px;
   }
  
</style>
</head>
<body>
  
    <div class="test"></div>

</body>
</html>

运行效果:

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

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

  • 提问者 AbelZephyr #1
    为什么 margin-right:-400px 想实现王右移动的效果 要与浮动float:right一起使用才可以生效,而 margin-left:-400却不用float:left ,就可以向左移动
    2020-09-01 11:24:49
  • 好帮手慕小班 回复 提问者 AbelZephyr #2
    同学你好,因为在html页面中,元素默认左对齐,此时设置margin-right距离右边的值,它并不会生效。 Ps:这是一个前端页面的小知识点,同学知道就好,并不用深究。 继续加油 祝:学习愉快~
    2020-09-01 14:52:02
好帮手慕小班 2020-08-31 19:07:14

同学你好,1、margin-left是左边距,可以是正值也可以是负值,正数向右偏移,负数向左偏移。

2、margin-left:-400px与margin-right:400px的效果并不一样,margin-left:-400px在当前位置向左移动400px的距离,而margin-right:400px是距离浏览器右侧400px的距离。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

  • 提问者 AbelZephyr #1
    那margin-right:-400px; 是不是就是往右移动了
    2020-09-01 09:15:57
好帮手慕小班 2020-08-31 16:36:24

同学你好,同学可以参考如下思路来理解这个居中:

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

当前div宽度为450px,先使用定位50%,使div居于页面一半的位置,然后再移动一半宽度的距离,就达到了居中的效果。

margin-left是左边距,可以有负值,正数向右偏移,负数向左偏移。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

  • 提问者 AbelZephyr #1
    我知道 这个是怎么算的 我只是不理解为什么margin-left:要有负值,而且还是表示相反方向,那如果按照同理来想的话 margin-left:-400px是不是就可以和margin-right:400px是同样效果了
    2020-08-31 16:45:38
好帮手慕小班 2020-08-31 15:21:21

同学你好,实现居中,建议先向右移动50%,然后在往后移动.test一半的宽度,比如:

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

实现效果:

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

另外,建议同学下次不要贴代码截图,不利于小慕复制粘贴测试代码,可以将代码贴出到代码区。

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

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

  • 提问者 AbelZephyr #1
    margin-left:-400px; margin-left:不是外边框值吗,为什么会有负值,而且负值代表相反方向,,,那么一个“人”的“身高“属性 ,是不是也可以是-值,代表他长到地下
    2020-08-31 15:32:03
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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