Css 是否'；位置：绝对'；与Flexbox冲突？

我想让一个

div

粘贴在屏幕顶部，而不影响其他元素，其子元素位于中间

.parent{
显示器：flex；
证明内容：中心；
位置：绝对位置；
}

文本

您必须将

宽度：100%

赋给

文本中心的父对象


.parent{
显示器：flex；
证明内容：中心；
位置：绝对位置；
宽度：100%
}

文本
您忘记了父级的宽度


.parent{
显示器：flex；
证明内容：中心；
位置：绝对位置；
宽度：100%
}

文本
不，绝对定位不会与flex容器冲突。使元素成为flex容器只会影响其内部布局模型，即其内容的布局方式。定位会影响元素本身，并可以改变其在流布局中的外部角色

也就是说


如果使用
display:inline flex
将绝对定位添加到元素，它将变为块级（如
display:flex
），但仍将生成flex格式上下文

如果使用
display:flex
将绝对定位添加到元素，则将使用“收缩到适合”算法（典型的内联级别容器）而不是可用的填充算法来调整其大小


也就是说

因为它是流动的，一个绝对定位的子flex
容器不参与flex布局

在我的例子中，问题是div的中心有另一个元素，它的z索引相互冲突


.wrapper{
颜色：白色；
宽度：320px；
位置：相对位置；
边框：1px灰色虚线；
高度：40px
}
.家长{
位置：绝对位置；
显示器：flex；
证明内容：中心；
顶部：20px；
左：0；
右：0；
/*此z索引覆盖需要显示在其他索引的顶部
或者，只需交换HTML标记的顺序*/
z指数：1；
}
.孩子{
背景：绿色；
}
.矛盾的{
位置：绝对位置；
左：120px；
高度：40px；
背景：红色；
保证金：0自动；
}

居中的
矛盾的
这可能会对您有所帮助。。这种行为在2016年的某个时候发生了变化-