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

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

AbelZephyr 2020-08-31

源自：CSS定位 6-3 编程练习

56

收起

4回答

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

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

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

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

运行效果：

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

提问者 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

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

当前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一半的宽度，比如：

实现效果：

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

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

提问者 AbelZephyr #1

margin-left:-400px； margin-left:不是外边框值吗，为什么会有负值，而且负值代表相反方向，，，那么一个“人”的“身高“属性，是不是也可以是-值，代表他长到地下

2020-08-31 15:32:03

相似问题

我不能理解最后的先设置左边为50%，然后在左移div块的一半什么意思？是代码这样吗

为什么右移和左移不是一个概念

关于左右移

延时器

如何将div块再向左移动div块一半的距离

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

java工程师2020版

参与学习人
提交作业 9404 份
解答问题 16556 个

综合就业常年第一，编程排行常年霸榜，无需脱产即可学习，北上广深月薪过万无论你是未就业的学生还是想转行的在职人员，不需要基础，只要你有梦想，想高薪

本课精华内容

问答作业

安装了MySQL 之后有时候自己会跳出来个黑窗口是为什么呢？

80 1

什么时候用List中的ArrayList呢，什么时候用HashSet，什么时候应该用HashMap

81 1

创建字符串的过程理解

62 1

如何干净的卸载数据库

135 1

请教一下没太懂

48 3

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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