html/css 图像相互重叠答案

【问题标题】：html/css image overlap eachotherhtml/css 图像相互重叠
【发布时间】：2016-03-16 09:28:00
【问题描述】：

我有一行处理四个图像，但我想要另一行，但它像这样相互重叠

这就是我想要实现的目标

index.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<div class="main_image"></div>
<div class="image123">
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/light_bokeh_edit.jpg"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/dancing.jpg"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/applecloud.jpg"/>
        <p>This is image 3</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/chair.jpg">
        <p>This is image 4</p>
    </div>
</div>
<div class="image123">
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/light_bokeh_edit.jpg"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/dancing.jpg"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/applecloud.jpg"/>
        <p>This is image 3</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/chair.jpg">
        <p>This is image 4</p>
    </div>
</div>
</body>

main.css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #360836;
    text-align:center;
}

li {
    display:inline;
}

li a {
    display: inline-block;
    color: #d14977;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

li a:hover {
    color: white;
}

div.main_image { 
content:url(../Image/everest.jpg);
    max-width: 100%;
    height: auto;
    width: auto\9;
}

.imgContainer{
    float:left;
    width:25%;
    position:relative;
    margin:0 auto;

}

.imgContainer img{
    max-width:100%;
    height: auto;
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imgContainer img.top:hover {
      opacity:0;
}

如何制作两行甚至两行以上的堆叠不相互重叠的图像。我想只使用 css 和 html 来实现这一点，我不想使用 javascript 或 jquery。谢谢

【问题讨论】：

你是什么意思，“堆栈”？不同的 z 索引？这符合“重叠”的条件......
比如一行有 4 个 img，另一行有另外 4 个 img，不重叠
.image123 应用了哪些规则？如果浮动 div，则摆脱浮动，或在两行之间放置一个 break/clear:both。
我没有在 css 中对 .image123 应用任何规则。我会尝试打破/清除看看是否有效

标签： html css

【解决方案1】：

这里的问题实际上不是由于您的.imgContainer 上的float，尽管起初这些症状可能会产生误导。

您看到的行为实际上是因为您在所有 .imgContainer img 元素上放置了 position:absolute，这意味着它们被从文档流中取出，并且根本不会影响其父母的高度. （容器没有降到 0 高度的原因是因为每个 .imgContainer 中的 <p> 仍然占用空间。）结果，图像相互重叠，因为它们的父级比它们短。

我的建议是仅将position:absolute 应用于出现在顶部（而不是顶部和底部）的图像，并将position:absolute 应用于<p> 以便它可以定位在图像的顶部（并且在图像正确定位后不会在图像行之间结束）。

所以我要添加/重写的 CSS 声明块是：

.imgContainer img{
    /* position:absolute removed */
    display:block
    max-width:100%;
    height: auto;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imgContainer img.top {
    position:absolute;
    left:0;
    top:0;
}

.imgContainer p {
    position: absolute;
    margin: 0;

    /* So the element doesn't block hover event of image */
    pointer-events: none;

    /* Vertical centering */
    top: 50%;
    transform: translateY(-50%);
}

这里有一个JSFiddle 来演示。希望这可以帮助！如果您有任何问题，请告诉我。

编辑：通过将display:block 应用于子图像，删除了图像行之间的垂直间距。来自this StackOverflow question。

【讨论】：

哇！！有用。只有一个问题，两排之间有一个微小的间隙。除了它的工作原理！谢谢
@WESTKINz 哦！关于这个差距的好点 - 让我看看我是否可以解决这个问题。
@MichaelBarreiro Heh，猜猜这只是一个伟大的思想相似的例子。 =P
@WESTKINz 顺便说一句，我已经编辑了我的答案以解决您提出的问题。让我知道这是否足以满足您的目的！

【解决方案2】：

我不确定为什么你的代码会给出这个结果，它可能与给你的图像一个绝对位置有关。但是我在下面做了一个小sn-p，它可以满足你的需求。我没有使用 img 标签，而是创建了一个类似于图像容器的 div，并为该 div 提供了图像的背景图像。我发现它总是使代码更简单。查看代码时，请全页查看，以便看得更清楚。

希望这会有所帮助！

.imgContainer{
  width:100%;
  background-color: red;
  margin-left: 10px;
 }
.imgBOX{
  height:350px;
  width:350px;
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/black-and-white-wallpaper-5.jpg);
  background-size: 100% 100%;
  display: inline-block;
  float: left;
 }
.imgBOX2{
  height:350px;
  width:350px;
  background-image: url(https://newevolutiondesigns.com/images/freebies/black-white-background-32.jpg);
  background-size: 100% 100%;
  display: inline-block;
  float: left;
 }

<div class='imgContainer'>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
</div>
<div class='imgContainer'>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
</div>

【讨论】：