html - 将HTML元素(固定)放置在另一个元素的顶部，该元素不重叠，并且在窗口调整大小时具有恒定的间距

Question

我有一个div元素，该元素具有以其为中心的背景图像。我希望将一个h2或p元素(固定或绝对，不确定哪个是正确的)放置在该div元素的顶部，但不要使其重叠。即使调整窗口大小，它的底边距也应相同。我已经尝试过将 innerText 放入具有背景图像的div中。我添加了这样的图像:

<div>    
<!-- other elements -->
   <div class="v-container visible default background-image">
</div>

并在CSS中:

.v-container {
    background-color: #e9e9e9;
    text-align: center;
    font-family: cursive;
}

.default {
    background-color: rgba(0, 0, 0, 0.103);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.background-image {
    background-image: url('../graphics/Note.png');
    background-position: center;
    background-repeat: no-repeat;
}

Answer 1

您可以发布代码吗？
如果您明确地使用图像作为div的背景，则居中元素将相对于div本身，并且除非宽高比完美，否则可能永远不会与背景图像真正对齐。
一个解决方案可能是创建一个嵌套的子div并相对于父对象设置边距。
或者，您可以将图像设置为元素而不是背景，这将使其更易于引用。
如果我能看到您的代码，将更容易提供帮助。