在其他元素下方显示 <img>答案

【问题标题】：Displaying <img> underneath other elements在其他元素下方显示 <img>
【发布时间】：2022-01-26 01:55:58
【问题描述】：

:root {
    --clr-primary: #0F052F;
    --clr-secondary: #43D9B8;
    --clr-light: #EEEEEE;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
}

* {
    margin: 0;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

body {
    font-family: 'Poppins', sans-serif;
}

.wrapper { 
    width: 1440px;
    margin: 0 auto;
    padding: 0 100px;

}

/* Header - Navigation */

.desktop-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1240px;
    position: fixed;
    z-index: 200;
    top: 44px;
    padding-right: 0;
}

.desktop-nav .menu-items {
    display: flex;
    list-style: none;
}

.desktop-nav .menu-items li {
    margin: 0 27.5px;
}

.desktop-nav .menu-items li:nth-last-of-type(1) {
    margin-right: 0;
}

.desktop-nav .menu-items li a {
    text-decoration: none;
    color: var(--clr-primary);
    font-size: 16px;
    font-weight: var(--fw-medium);
    position: relative;
}

.desktop-nav .menu-items li a.active::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: var(--clr-secondary);
    left: 0;
    bottom: -2px;

}

.desktop-nav .menu-items li a.btn {
    color: white;
    background-color: var(--clr-primary);
    border-radius: 10px;
    padding: 10px 23px;
}

/* BIA section */

.bia-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bia-container .left h1 {
    font-size: 80px;
    font-weight: var(--fw-bold);
    margin: 60px 190px 18px 105px;
}

.bia-container .left p {
    font-size: 18px;
    font-weight: var(--fw-regular);
    margin: 18px 195px 57px 105px;
}

.bia-container .left a.btn {
    text-decoration: none;
    color: rgb(0, 0, 0);
    border-radius: 10px;
    padding: 10px 23px;
    border: 1px solid #43D9B8;
    margin: 0 0 0 105px;
    
}

.bia-container .right {
    padding-right: 105px;
}

/* Background header */

.bia-bg {
    position: absolute;
    z-index: -1;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google Fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="wrapper">
        <nav class="desktop-nav">
            <div class="logo">
                <a href="#">
                    <img src="Images/bia-logo.svg" alt="">
            </div>

            <ul class="menu-items">
                <li>
                    <a href="#" class="active">Home</a>
                </li>

                <li>
                    <a href="#">Services</a>
                </li>

                <li>
                    <a href="#">Contact</a>
                </li>

                <li>
                    <a href="#" class="btn">Neem contact op</a>
                </li>
            </ul>
        </nav>

        <!-- End of desktop navigation -->

        <header class="bia-container">
            <div class="left">
                <h1>Make data work for you</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra
                    tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient
                    purus. Libero pharetra tortor.</p>
                <a href="#" class="btn">Neem contact op header</a>
            </div>

            <div class="right">
                <img src="Images/header-analytics.svg" alt="">
            </div>

            <img class="bia-bg" src="Images/header-background.svg" alt="">

            <!-- End of header section -->
        </header>
    </div>

    <script src="main.js"></script>
</body>

</html>

我有问题。我有一个要显示的背景图像，但是当我为图像提供 -1 的 z-index 时，它变得不可见并且不在背景中显示。有谁知道为什么会发生这种情况？

<div class="right">
    <img src="Images/header-analytics.svg" alt="">
</div>

.bia-bg {
    position: absolute;
    z-index: -1;
}

我正在谈论的类和图像位于第 56 行 (HTML)，而类和图像位于第 117 行 (CSS)。

供您参考，代码可以在这里找到：JSFiddle。

任何帮助将不胜感激！

它应该是什么样子：

Design

【问题讨论】：

请编辑您的问题以在问题本身中包含minimal reproducible example 。使用问题编辑器的实时演示功能。
@Quentin 我已尝试正确编辑它。希望这会更好。
任何不使用背景图像的理由，如果这真的是背景，即仅视觉效果。
它可能用于动画@AHaworth

标签： html css

【解决方案1】：

您已经为所有内容设置了默认的白色背景。

这意味着 z 索引为 -1 的东西根本看不到，因为 z 索引默认为 0 的元素用白色覆盖它。

尝试删除该毯子设置。

【讨论】：

【解决方案2】：

要将背景放在 div 或其他元素上，您只需在 CSS 上使用它：

background-image: url("./your_image.png");

变成这样
html

<div class="bg_img">
    <!-- something -->
</div>

css

.bg_img{
    background-image: url("Images/header-analytics.svg");
}

【讨论】：

我已经添加了设计的外观。当我进行您建议的更改时，它没有得到预期的结果。