如何使用 display:flex 将图像放在一起？答案

【问题标题】：How can I put images on top of each other with display:flex?如何使用 display:flex 将图像放在一起？
【发布时间】：2018-06-16 02:52:46
【问题描述】：

我正在构建一个网站，其中的图像垂直和水平居中，为了实现这一点，我设置了它们的显示：flex。但是，我希望它们相互堆叠并居中。

我的 HTML 如下所示：

<body>
<div id="space">
    <div>
        <img id="outerrim" class="layer" src="./assets/css/images/outerrim.png">
        <div>
            <img id="innerrim" class="layer" src="./assets/css/images/innerrim.png">
        </div>
    </div>
</div>
</body>

我的 CSS 看起来像这样：

body, html {
    height: 100%;
    margin: 0;
}

#space {
    background-image: url("./images/sky.png");
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
}

.layer {
    object-fit: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

这就是它的样子： picture link

我希望这两个褪色的图像重叠，但我需要 flex CSS 使图像垂直和水平居中对齐。

有什么建议吗？

【问题讨论】：

如果您的问题是如何将一个图像居中于另一个图像的中间，我看不出 flex 的作用。只需在第一个图像的父级上设置 position:relative 和 absolute在第二张图片上。
谢谢！这就是我编码而不是睡觉所得到的。我只是将 flex 样式更改为 #outerrim 并按照您所说的应用定位。
stackoverflow.com/help/mcve

标签： html css flexbox

【解决方案1】：

因为将它们放在彼此的顶部 flex-box 是不正确的方法。在里面创建一个position:relative 容器，放入图像并设置为position:absolute。给他们z-index:[1-100] 最高价值的顶部图像。

【讨论】：