如何自动高度，宽度的div z索引的内容

Question

我正在尝试自动调整父div的高度-宽度，其中有3个图像一个堆叠在另一个上，但即使div和最后一个图像在同一个z索引上，父div也不会获取内容的高度和宽度；这是正在发生的事情和我想要的东西的说明我不能使用静态值，因为它需要响应这是的插图

这是我的代码：

.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，因为您将从流中删除所有图像，因此流中没有定义容器高度的内容。保留至少一个CCD_ 2。您也可以将容器更改为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>