CSS和HTML - 如何让div不重叠？

Question

所以，我试图用百分比在屏幕中间创建一个照片库，图像最终位于中心，并且与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>

Answer 1

我的建议是在photoset IMG位置属性更改为相对：

$(function() { 
 
    $('.photoset').each(function(){ 
 
    $(this).data('counter', 0); 
 
    }); 
 

 
    var showCurrent = function (photoset) { 
 
    $items = photoset.find('img'); 
 
    var counter = photoset.data('counter'); 
 
    var numItems = $items.length; 
 
    var itemToShow = Math.abs(counter % numItems); 
 
    var width = $(window).width; 
 

 
    $items.fadeOut(1000); 
 

 
    //Adjust orientation - Portrait or Landscape 
 
    if (($items.eq(itemToShow).width()/$items.eq(itemToShow).height()) > 1) { 
 

 
     photoset.css({ 
 
     width: "52%", 
 
     height: "69%" 
 
     }); 
 
    } else if (($items.eq(itemToShow).width()/$items.eq(itemToShow).height()) < 1) { 
 
     photoset.css({ 
 
     width: "23%", 
 
     height: "69%" 
 
     }); 
 
    } 
 
    $items.eq(itemToShow).fadeIn(1000); 
 
    }; 
 

 
    $('.photoset').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    var photoset = $(this); 
 
    var pWidth = photoset.innerWidth(); 
 
    var pOffset = photoset.offset(); 
 
    var x = e.pageX - pOffset.left; 
 
    if (pWidth/2 > x) { 
 
     photoset.data('counter', photoset.data('counter') - 1); 
 
     showCurrent(photoset); 
 
    } else { 
 
     photoset.data('counter', photoset.data('counter') + 1); 
 
     showCurrent(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 { 
 
    position: relative; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1); 
 
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 
<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>

Answer 2

正如@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>

Answer 3

而不是使用您的photoset使用padding-bottom: 50%;和乱用百分比，直到你得到你想要的高度的高度。然后设置图像的高度为100％，宽度为100％，而不是顶部，左侧，右侧，底部。

这里是一个小提琴Fiddle

Answer 4

正如其他人所说，使用absolute定位你的图像是没有意义的 - 它会使事情更难。但是，您可以使用absolute元素可以将置于之后的其他元素，而不用推送内容。我的建议是只有一个班级能够告诉你当前正在显示哪个图片。显示的图像将有一个relative的位置，其他将有一个absolute的位置，允许图像出现在左上角相同的位置，但一些被遮挡而另一些可见。

下面的方法的主要优点是您的图像可以根据您的需要调整您的包装盒的尺寸，并且photoset可以作为覆盖层等内嵌放置在文档流中......它非常灵活，所以给它一试。这也意味着你的JavaScript变得更轻松，更容易，因为你需要做的就是将正确的类添加到图像来显示它。您还可以添加一个带有标题的相对框，并且它可以正常工作。

// Don't worry about this, its just a quick implementation to make your photos rotate 
 
var ps = Array.prototype.slice.call(document.querySelectorAll('.photoset')).forEach(function(set){ 
 
    var all = Array.prototype.slice.call(set.querySelectorAll('img')); 
 
    var index = 0; 
 
    setInterval(function(){ 
 
    all[index].className = ''; 
 
    index = index + 1 >= all.length ? 0 : index + 1; 
 
    all[index].className = 'active'; 
 
    },1000) 
 
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
.body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.photoset { 
 
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1); 
 
    overflow: hidden; 
 
    width: auto; 
 
    display: inline-block; 
 
} 
 

 
#absolute-photoset { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    max-width: 80%; 
 
    max-height: 80%; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    z-index: 1; 
 
} 
 

 
.photoset img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    opacity: 0; 
 
    display: block; 
 
} 
 

 
.photoset img.active { 
 
    position: relative; 
 
    opacity: 1; 
 
}

<div class="photoset" id="absolute-photoset"> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" /> 
 
    <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> 
 

 
<h1>My Title</h1> 
 
<div class="photoset" id="inline-photoset"> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" /> 
 
    <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> 
 
<p>The above photoset seems to be pushing this text down as expected!</p>

这photoset类也推内容出它的方式，如果它是不定位绝对的，我的猜测是，你在找什么。你也可以调整.photoset的大小，并且里面的图像应该跟随（我不确定max-width是否会改变图像的比例，如果是这样，请只使用单向max值，如只是max-width）。

主要优点是可以治疗.photoset作为一个盒子，不用担心它的内容，所以现在你可以在线使用，绝对定位，固定等..