jquery - CSS和HTML-如何使div不重叠？

因此，我尝试使用百分比在屏幕中间创建一个图片库，图像最终居中，并且可以通过jquery正常运行以更改图像，但是没有问题，但是图像div最终覆盖了div包含图库名称，如何使用百分比固定图库div？

这是小提琴：https://jsfiddle.net/52gwc0j2/

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
    position:relative;
    width: 52%;
    height: 69%;
}

.photoset img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}

<div class="row">
 <div class="col-md-4 col-md-offset-4 text-center">
    Photoset Header
 </div>
</div>
<div class="photoset center-block">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

最佳答案

正如@rac所说，.photoset的高度是0，因为它的子元素是绝对定位的。

要以最小的代码更改来解决此问题，请将选择器从.photoset img更新为.photoset img + img。这只会定位放置在图像之后的图像。结果是您的第一张图像设置了.photoset的高度，所有后续图像都覆盖在顶​​部。

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
    position:relative;
    width: 52%;
    height: 69%;
}

.photoset img + img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}

<div class="row">
 <div class="col-md-4 col-md-offset-4 text-center">
    Photoset Header
 </div>
</div>
<div class="photoset center-block">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>