Html 在Flex Box网格中覆盖两个元素

我想创建一个

Flex-Box网格

，它在

行中显示元素

，并且

在超过最大大小时包装它们。我能够创建
网格
，而无需覆盖
弹性框项目


但是，我希望小矩形覆盖大矩形。它们应该放在大矩形的左上角。每当我使用
定位
时，例如
绝对
或
相对
都会破坏
网格
。我如何将元素覆盖在弹性盒网格中？
您需要在此处定位我相信：

更新CSS以应用：

.input-color {
  position: relative;
}

.input-color .color-box-small {
  position: absolute;
  top: 0;
  left: 0;
}



.grid{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对正内容：空间均匀；
}
.输入颜色{
位置：相对位置；
}
.输入颜色。颜色框小{
位置：绝对位置；
排名：0；
左：0；
宽度：10px；
高度：10px；
显示：内联块；
背景色：#ccc；
}
.输入颜色。颜色框大{
宽度：290px；
高度：40px；
显示：内联块；
背景色：#ccc；
}
将
位置：相对
赋予
。输入颜色
并在此类
中添加
位置：绝对
。输入颜色。颜色框小


.grid{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对正内容：空间均匀；
}
.输入颜色。颜色框小{
宽度：10px；
高度：10px；
显示：内联块；
背景色：#ccc；
位置：绝对位置；
}
.输入颜色。颜色框大{
宽度：290px；
高度：40px；
显示：内联块；
背景色：#ccc；
}
.输入颜色{
位置：相对位置；
}