Html 当我调整屏幕大小时，为什么图像会重新定位？

我需要创建这个效果-图片1。但这是我目前的结果——图2。看起来不错，但当屏幕调整大小时它会移动，请看图片3。

我知道我需要使用z-index，我已经有了，但它并没有按照我的计划工作。当前，当我调整屏幕尺寸时，元素会移动很多-图片3（例如iPhone 8）：

我尝试过改变position属性和其他东西，但我看不出我做错了什么。代码如下： HTML:

如果您想查看完整代码，可以在此处（不带图片和引导）：

---

我使用的是HTML5、CSS3和Bootstrap 4。

您不必使用z-index。试着这样做：

.showcase-two-vektor {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

例子：

.container{
边框：2件纯黑；
填充：10px；
位置：相对位置；
}
.img{
高度：140像素；
背景：蓝色；
宽度：计算（50%-22px）；
显示：内联块；
填充：10px；
}
.吐司{
高度：100px；
宽度：100px；
背景：rgba（255255,0,4）；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

味道好极了！

您可以通过删除多余的网格声明来简化代码（例如，

col-6 col-md-6 col-lg-6

与只声明

col-6

相同）

.img拼贴{
位置：相对位置；
}
.img蛋糕{
宽度：100%；
身高：100%；
}
#img圈{
位置：绝对位置；
宽度：50%；
身高：50%；
左：25%；
最高：25%；
z指数：1；
}
#img循环。img流体{
边界半径：900px；
身高：100%；
}

1。您可以使用stackoverflow 2提供的代码段。您可以创建div（例如）块并赋予div“position:absolute；top:calc（圆形图片的50%高度）；”这与z索引无关-您的z索引很好，因为中间的东西显示在网格上方-这就是所有的z索引控件，堆栈上下文。您需要正确设置您的位置，根据外观，您可以使用顶部和左侧的50%，平移为-50%。还有，小提琴的意义是什么，它并没有增加这个问题，因为您还没有包括任何引导样式

    #showcase__two__element__two {
    padding-top: 30px;
    height: 92%;
}

.showcase-two-groupone{
    padding-left: 10px;
    padding-right: 10px;
}

.showcase-two-grouptwo{
    padding: 10px;
}

.img-flour {
    width: 100%;
    height: 100%;
    object-fit: cover;
    outline: 4px solid white;
    outline-offset: -10px;
    z-index: 0;
}

.img-egg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    outline: 4px solid white;
    outline-offset: -10px;
    z-index: 0;
}

.img-cake {
    width: 100%;
    height: 100%;
    object-fit: cover;
    outline: 4px solid white;
    outline-offset: -10px;
    z-index: 0;
}

.img-cakestraw {
    width: 100%;
    height: 100%;
    object-fit: cover;
    outline: 4px solid white;
    outline-offset: -10px;
    z-index: 0;
}

.showcase-two-vektor{
    position: absolute;
    z-index: 3;
    padding-top: 150px;

}

#showcase-two-vektortext{
    font-family: 'Alegreya', serif;
    color: #c9b176;
    text-transform: uppercase;
    z-index: 4;
}

.showcase-two-vektor {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}