使用 Z-Index 的图像叠加但看不到下面的元素

Question

我正在尝试完成以下操作，我在页面左侧有一些文本，在右侧有一个图形。 https://i.stack.imgur.com/K5jAy.png

我正在使用 Bootstrap 4，到目前为止一切顺利。但是，在尝试将图形合并到站点时，我运行遇到两个问题：

无论网站在何种屏幕尺寸上显示，我总是希望图形以相同的方式定位。目前我将图形的宽度设置为 75%。当我在较小的屏幕上预览时，图形甚至不可见，因为宽度相对于视口的宽度来说太小了。我正在使用绝对定位，但这似乎会根据屏幕尺寸而改变。
在较大的显示器上预览时，图形显示在我的文本之上。现在，我认为这不是问题。我已将我的图形保存为 png 以允许透明，并且我为我的图形提供了比文本元素更高的 z-index。但是，图形似乎像一个块并覆盖了我的文本元素，如此处所示。 https://i.stack.imgur.com/wk5QX.png

对于如何解决这两个问题，您有什么建议吗？

HTML:

<section class="header">
<div class="container-fluid p-4">
    <img class="logo" width="52" height="57" src="img/BraydonCoyerLogoIcon.png" alt="Personal Logo">
    <img src="img/decoration1.png" alt="Colorful Decorations" class="decoration">
</div>
<div class="container mt-5">
    <div class="greeting">
        <div>
            <h1>Hi,</h1>
            <h1>Some <span class="highlight">Text</span></h1>
            <hr align="left"/>
        </div>

    </div>
</div>

CSS:

* {
    background-color: #262628;
    color: #eaeaea;
    font-family: "Varela Round", Helvetica, Arial;
}

.greeting {
    margin-top: 10em;
}

.greeting h1 {
    font-size: 100px;
}

.highlight {
    color: #f99e46;
}

.slogan {
    font-size: 20px;
}
hr {
    background-color: white;
    width: 50%;
}

.decoration {
    width: 75%;
    position: absolute;
    z-index: initial;
    top: -150px;
    left: 520px;
}

Answer 1

尝试对左侧位置使用百分比：left: 50%
看起来您的装饰图片继承了通配符选择器background-color: #262628;

使用 Z-Index 的图像叠加但看不到下面的元素

Image Overlay Using Z-Index But Cannot See Elements Beneath

css

overlay

positioning

image