绝对定位导致父盒子塌陷怎么解决？

Question

在作案例的时候，网页需要实现自适应，但是轮播图大图设置绝对定位后通过js改变轮播图的z-index值进行轮播，但是由于轮播图设置了绝对定位，脱离文档流了，没有办法去撑起父盒子的高，并且不能给父盒子固定高度，这样的高度塌陷怎么解决？

Answer 1

给"轮播图大图"外面再套一层结构，然后根据图片的宽高比给父类设置padding-bottom，height为0，用padding去撑开”新套的父类“高度，不影响你现在流的高度(爷类)。

Answer 2

比如说你想要通过设置 z-index 来进行轮替的话，其实可以让第一张图相对定位，后续的所有轮播图使用绝对定位，这样就可以通过 z-index 来轮替了.

也可以获取一下所有轮播图中最大的图片高度去给轮播的容器设置，也是解决问题的方法，只不过这样的话就需要考虑 resize 的问题了。

但是如果你只是想做一个轮播图的话，现在有很多的UI库都有提供这个组件，以及一直以来都很出色的 SwiperJS 可以选择。

Answer 3

留一个设置相对定位就可以了，这样可以保证父级高度不会塌陷，比如

.item{
    position: absolute
}
.item::first-child{
    position: relative
}

Answer 4

外层再包一个占位元素撑起位置即可。
很多ui的顶部定位导航栏就是这么做的。