html - 我如何将一个 div 叠加到一个里面有图像的 div 上？

Question

我正在创建一个主页，其中有一个覆盖整个屏幕的图像，该图像的中心将有 Logo 和一个将用户带到实际网站的链接。

一切正常，但我的图像和链接自动位于图像下方，我找不到修复。

这是我的 html:

<div id="homebackground">
    <img src="img/home.jpg" id="homebackgroundimage" alt="homebackgroundimage">
    <div id="entersite">
        <img src="img/dignanslogo.jpg" id="logohome" alt="dignans-logo"><br />
        <a href="about.html" id="entersitelink">Enter Site</a>
    </div>
</div>

这是我的CSS:

#homebackground{
    width:100%;
    height:auto;
    position:relative;
}

#homebackgroundimage{
    width:100%;
    height:auto;
    position:relative;
    display:block;
}

#entersite{
    margin:auto;
    text-align:center;
    width:50%;
    height:50%;
    position:absolute; z-index:-1;
}

#logohome{
    max-width:15%;
    max-height:15%;
    margin:auto;
    position:absolute;
    z-index:1;
    top:0;
    left:0;
}

#entersitelink{
    z-index:1;
    position:absolute;
    text-align:center;
}

Answer 1

如果那只是您要在页面上显示的内容，则不需要那么多代码。 您可以添加一个带有背景图像的容器，并在其中添加 Logo 和链接。

.container{
    width: 100%;
    height: 100vh;
    background-image: url("here go url for background image");
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

<div id="container">
  <img src="img/dignanslogo.jpg" id="logohome" alt="dignans-logo">
  <a href="about.html" id="entersitelink">Enter Site</a>
</div>

现在您不需要搞乱绝对位置和 z-index。此外，如果您对默认样式不满意，则需要设置图像和链接的样式。