Question

我正在寻找合适的CSS方法，在不使用position:absolute的情况下在另一个div图像（不是背景图像）上叠加div图像。有谁知道怎么做？

Answer 1

position: absolute不是“不合适” - 它是CSS规范的一部分！没有其他方法可以将元素放在其他元素上，除非您对position: relative或某些float属性感兴趣。

position: absolute是最简单的方法。是什么让你认为这是一个坏主意？

唯一的解决办法是在div中使用带有背景的图像，如下所示：

<div>
    <img src="...">
</div>

然后给div background-image：

div
{
    background: url(/images/foo.png) no-repeat;
}

然而，对于多个图像，我肯定会坚持position: absolute。

有一个非常错误的演示here来证明这种效果。

Answer 2

http://jsfiddle.net/HUUQ6/2/

您可以使用负边距将元素叠加/重叠在一起。例如：

#b{
    margin-left:-10px;
}

这会将元素b移动到左边10px，覆盖它左边的任何内容（假设这是一个显示：块类型元素，而不是内联，如跨度）。

Answer 3

这里介绍如何将 2 张图像分层并使第二张图像居中。

注意：“图像2”中的“位置：绝对”仅用于图像可以重叠。它仍然会响应式地将您的图像居中/无需使用“左：”或“右：”或边距，并且与图像大小无关。

HTML：


<div class="page-container">

    <div class="images-container">
        <img class="image1" src="YOURIMAGEURLHERE" />

        <div class="image2container">
            <img class="image2" src="SECONDIMAGEURLGOESHERE" />
        </div>
    </div>
</div>

CSS：

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

SCSS（如果您喜欢，我会这样做 - 可以更轻松地将样式从 1 个文件复制到另一个文件）


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

如何在不使用位置的情况下叠加图像：绝对？

3 个答案: