幽梦三影 发表于 2018-8-6 21:05:34

为什么position都设置为absolute就重叠，其中一个设置成relative不重叠

{:10_277:}

claws0n 发表于 2018-8-6 22:00:08

absolute 绝对，relative 相对。绝对坐标只有一个，不重叠吗？

不二如是 发表于 2018-8-7 09:27:22

1、鱼油演示的是两个独立的div，默认情况两个块级元素，基于文档流进行上下排列。

2、当为其中一个元素设置为absolute，绝对定位，意味着相对于父元素进行定位，而父元素是body，所以那个元素会“脱离”文档流，意味着两个元素就会重叠，因为其中一个在文档流中，另一个不在。

3、脱离文档流可以理解为“三明治”，未设置绝对定位前，两个元素在同一纬度排列，其中一个脱离后，变到了新的一“层”，从页面上看，便是重叠

幽梦三影 发表于 2018-8-7 15:31:01

不二如是 发表于 2018-8-7 09:27
1、鱼油演示的是两个独立的div，默认情况两个块级元素，基于文档流进行上下排列。

2、当为其中一个元素 ...

第一张图为什么没有重叠

不二如是 发表于 2018-8-7 16:03:28

幽梦三影 发表于 2018-8-7 15:31
第一张图为什么没有重叠

第一个元素设置为相对定位后，其实就变成了html整体横向撑满屏幕，而第二个元素脱离文档流，会脱离html，所以变成在下面一行，无法直接显示在a撑满的一行中。
页: [1]
查看完整版本: 为什么position都设置为absolute就重叠，其中一个设置成relative不重叠