请教一下怎么理解css定位中 relative:对象不可层叠?

发布网友发布时间：2022-04-06 11:39

共2个回答

热心网友时间：2022-04-06 13:08

首先明确几个概念：
静态定位：position:static
动态定位：position:relative
祖元素：任意包含该元素的元素
父元素：直接包含该元素的祖元素
同辈元素：拥有共同的父元素的元素
法则一：同辈元素定位方式相同时，且无z-index设置时，html靠后者居上
法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上
三：同辈元素定位方式不同，动态定位居上
四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上
五：非同辈元素，任意一者或其祖元素拥有动态定位，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素或其本身进行比较
1. 子元素的z-index无论多大，父元素者居上
2. 父元素居下，子元素也可以居上
父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时，其比较已与position：staic无关，而其祖元素却可通过html的位置来进行比较

热心网友时间：2022-04-06 14:26

我的理解是可以层叠，相对定位通过top，right，bottom，left就可以让两个div重合在一起，通过z-index显示div的层次。只是绝对定位是脱离文档流的，会悬浮起来，不占页面空间，其父元素的高度也会没有了，而相对定位就是父元素高度不会改变，但是子元素可以移动到任何地方追问我也是这么理解的，当然因为设定了relative定位后，其层叠顺序相当于z-index 0，所以会覆盖别的元素，但如果和别的层叠上下文层叠的话，也可能位于其下。但是，正式说明文档里写的对象不可层叠，想问问这个怎么去理解？？？
或者说可以理解成，relative的表示位置可以层叠，而原始位置不可设置层叠顺序？但是也可以继承层叠上下文的方式更改层叠顺序吧？？？