如何将 div 叠加到内部带有图像的 div 上

Question

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

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

这是我的 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

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

.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索引。此外，如果您对默认样式不满意，则需要设置图像和链接的样式。

Answer 2

你需要为父div 提供背景，并为内部div 提供绝对位置，并且需要改进 css...立即检查

#homebackground{
    width:100%;
    height:100vh;
    position:relative;
    background:url('https://dummyimage.com/600x400/000/fff') no-repeat center center;
    background-size:cover;
}
#homebackgroundimage{
    width:100%;
    height:auto;
    position:relative;
    display:block;
}
#entersite{
    margin:auto;
    text-align:center;
    width:50%;
    height:50%;
    top:50%;left:50%;transform:translate(-50%,-50%);
    position:absolute; 
    z-index:9;
}
#logohome{
    margin:auto;
    width:250px;
    height:150px;
}
#entersitelink{
    z-index:1;
    text-align:center;
}

<div id="homebackground">
    <div id="entersite">
        <img src="https://www.google.co.in/logos/doodles/2017/hirotugu-akaikes-90th-birthday-5767291382792192-l.png" id="logohome" alt="dignans-logo"><br />
        <a href="about.html" id="entersitelink">Enter Site</a>
    </div>
</div>