как автоматически высоту, ширину div z-проиндексированный контент

Question

Я пытаюсь автоматически изменить ширину родительского элемента div, в котором 3 изображения расположены друг над другом, но родительский элемент не принимает высоту и ширину содержимого, даже если div и последнее изображение находятся в одном и том же z-индексе.;вот иллюстрация того, что происходит, и что я хотел бы, я не могу использовать статические значения, так как это необходимо, чтобы быть отзывчивым вот иллюстрация

вот мой код:

.image_holder {
        margin-top: 5em;
      
        overflow: visible;
        background-color: red;
     display:block;
       z-index: -12;
        position:relative;
         border-style: solid;
  border-width: 5px;
  border-color:red;
    }

.image_preview_parent {
    position: absolute;
}


/*----------layers start---------*/
.layer_Back {
    z-index: -12;
}

.layer_Camera {
    z-index: -11;
}

.layer_Logo {
    z-index: -10;
}

<div class="image_holder">
  <img class="image_preview_parent layer_Logo" src="https://www.transparencyatwork.org/assets/fallback/employers/logo/thumb_default-9fbd6d06cb43649ddc8bfd34eb4b1192396a73474ce3c27cb5830b9edf86ae23.png" />
 <img class="image_preview_parent layer_Camera" src="https://freepngimg.com/thumb/sunglasses/14-2-sunglasses-transparent-thumb.png" />
                            <img class="image_preview_parent layer_Back" src="https://d33wubrfki0l68.cloudfront.net/673084cc885831461ab2cdd1151ad577cda6a49a/92a4d/static/images/favicon.png" />
  </div>

Answer 1

Не делайте все изображения position:absolute, потому что вы удалите все их из потока, таким образом, нет никакого содержимого в потоке, которое определит высоту контейнера.оставить хотя бы одну position:relative.Вы также можете изменить контейнер на inline-block, чтобы ширина соответствовала содержимому.

В качестве примечания, z-index здесь не имеет никакого отношения, поэтому любые значения, которые вы будете использовать, будут влиять только напорядок стека, а не высота или ширина:

.image_holder {
  margin-top: 5em;
  overflow: visible;
  background-color: red;
  display: block;
  z-index: 10;/*this is the parent element so any value should be enough, you don't need to make it lower that the child */
  position: relative;
  border-style: solid;
  border-width: 5px;
  border-color: red;
  display:inline-block; /*to fit the width*/
}

.image_preview_parent {
  position:relative;
}
.image_preview_parent:not(:first-child) {
  position: absolute;
  left:0;
  top:0;
}


/*----------layers start---------*/

.layer_Back {
  z-index: -2;
}

.layer_Camera {
  z-index: -1;
}

.layer_Logo {
  z-index: 0;
}

<div class="image_holder">
  <img class="image_preview_parent layer_Logo" src="https://www.transparencyatwork.org/assets/fallback/employers/logo/thumb_default-9fbd6d06cb43649ddc8bfd34eb4b1192396a73474ce3c27cb5830b9edf86ae23.png" />
  <img class="image_preview_parent layer_Camera" src="https://freepngimg.com/thumb/sunglasses/14-2-sunglasses-transparent-thumb.png" />
  <img class="image_preview_parent layer_Back" src="https://d33wubrfki0l68.cloudfront.net/673084cc885831461ab2cdd1151ad577cda6a49a/92a4d/static/images/favicon.png" />
</div>