关于relative可以使浮动元素发生偏移的问题

第二点，相对定位的元素不会离开常规流，但是第4点，其可以使浮动元素发生偏移，这不是矛盾了吗？浮动元素的特点之一不就是使元素脱离文档流吗？但是相对定位的元素又不会离开常规流，那一个元素既设置为relative定位，又设置浮动后它究竟是离开文档流还是不离开文档流？

宝慕林842399 2019-01-12

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

1

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-02-15 15:30:47

你好同学 , 这要看使用什么定位了 .如果相对定位和浮动同时设置时 , 是可以配合使用的 ,如下:

浮动是两个盒子在一行显示 , 并且第一个盒子设置定位偏移值也是起效果的 :

但是当绝对定位(或者固定定位)和浮动一起使用时 , 由于绝对定位和浮动都会让元素脱离文档流 ,两个属性就有点相冲了 .此时浮动就无效了 .

可以发现 ,浮动失效了 . 两个元素由于定位重叠在一起 .第一个设置偏移值往下移动了 .

建议同学可以自己去测试一下 ,能够帮助自己理解 . 祝学习愉快 ,望采纳 .

宝慕林842399 提问者 #1

老师可不可以这么来理解，假如先不看定位，只看浮动的话，那么无论是绝对定位还是相对定位，那么结果都是两个box一行并列排，现在，第一个因为加了relative，因为相对定位不脱离文档流，所以其位置不会被右边的盒子占据。而如果加了soluted或fixed的话，因为绝对定位和固定定位会脱离文档流，所以其位置就被右边的盒子给占据。我感觉当定位和浮动一起设置是，先看浮动，在加上定位好像更好理解一些

2019-02-15 19:20:47
好帮手慕夭夭回复提问者宝慕林842399 #2

你好，你也可以按照自己的方式去理解哦。

2019-02-17 10:08:09

山河远阔ZZ 2019-01-13 15:02:13

同学你好，设置relative的元素本身是不会脱离文档流的，设置浮动的元素是会脱离文档流，所以一个元素设置了相对定位和浮动后 ,它会因为设置浮动而脱离文档流的。

希望解决了你的问题，祝学习愉快，望采纳！

提问者宝慕林842399 #1

所以，当定位和浮动矛盾时，浮动的权限更高是不是？

2019-02-15 12:39:15

相似问题

绝对定位能不能使浮动元素偏离？

元素浮动后的属性问题

after设置absolute后水平垂直偏移未设，相对于relative元素的偏移？

老师使用float浮动后那么他的外间距是和哪个元素的？还是和浮动前一样吗？

关于浮动的疑问

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

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载