Question

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

我知道我需要使用z-index，但是它没有按照我的计划运行。当我调整屏幕大小时，元素会移动很多 - 图片3（例如iPhone 8）：

我试过改变位置属性和其他东西，但我看不出我做错了什么。这是代码： HTML：

              <div class="col-lg-6">
                <div id="showcase__two__element__two">
                    <div class="h-100 row">
                        <div class="h-50 col-lg-6 col-md-6 col-sm-6 col-6 showcase-two-groupone">
                            <img src="img/flour.png" class="img-fluid img-flour" alt="Flour image">
                        </div>
                        <div class="h-50 col-lg-6 col-md-6 col-sm-6 col-6 showcase-two-groupone">
                            <img src="img/egg.png" class="img-fluid img-egg" alt="Eggs image">
                        </div>
                        <div class="h-50 col-lg-6 col-md-6 col-sm-6 col-6 showcase-two-grouptwo">
                            <img src="img/cake.png" class="img-fluid img-cake" alt="Cake image">
                        </div>
                        <div class="h-50 col-lg-6 col-md-6 col-sm-6 col-6 showcase-two-grouptwo">
                            <img src="img/cakestraw.png" class="img-fluid img-cakestraw" alt="Cake and strawberry image">
                        </div>
                        <div class="col-lg-12 rounded showcase-two-vektor">
                            <span id="showcase-two-vektortext">Tastes so good!</span>
                            <img src="img/vektor.png" class="img-fluid" alt="Tastes so good !">
                        </div>
                    </div>
                </div>
            </div>

CSS：

    #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;
}

如果你想看到完整的代码，你可以在这里（没有图片和引导程序）：https://jsfiddle.net/prozik/btvch7c6/

我正在使用HTML5，CSS3和Bootstrap 4。

Answer 1

您可以通过删除多余的网格声明来简化您的代码（例如col-6 col-md-6 col-lg-6与声明col-6相同）。

.img-collage {
  position: relative;
}
  
.img-cake {
  width: 100%;
  height: 100%;
}
  
#img-circle {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  z-index: 1;
}

#img-circle .img-fluid {
  border-radius: 900px;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container img-collage">
  <div class="w-50 h-50 text-center" id="img-circle">
    <img src="http://placehold.it/300x300/000000/" class="img-fluid">
  </div>
  
  <div class="row text-center">
    <div class="h-50 col-6 mb-4"><img src="http://placehold.it/200x200/" class="img-fluid img-cake"></div>
    <div class="h-50 col-6 mb-4"><img src="http://placehold.it/200x200/" class="img-fluid img-cake"></div>
    <div class="h-50 col-6"><img src="http://placehold.it/200x200/" class="img-fluid img-cake"></div>
    <div class="h-50 col-6"><img src="http://placehold.it/200x200/" class="img-fluid img-cake"></div>
  </div>
</div>

Answer 2

您不应该使用z-index。尝试这样的事情：

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

实施例

.container {
  border: 2px solid black;
  padding: 10px;
  position: relative;
}

.img {
  height: 140px;
  background: blue;
  width: calc(50% - 22px);
  display: inline-block;
  padding: 10px;
}

.toast {
  height: 100px;
  width: 100px;
  background: rgba(255,255,0,.4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="toast">Tastes so good!</div>
</div>

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

2 个答案:

实施例