引导标签覆盖

Question

我有一个

div

和一些

html

生成一个复杂的图表。我需要在图表的顶部和底部放置一个标签，覆盖图表

div

（理想情况下覆盖图表 div 区域顶部和底部的 10%）。

我正在尝试下面的模拟示例，但我找不到为什么只有底部标签有效。如何在图表div上覆盖顶部标签？我缺少什么？是否可以将其作为图形 div 区域的百分比来实现？

<div class="z position-relative">
    
    <div style="position:absolute; z-2"> 
        <h2 style="background-color:grey;" >Top Label</h2>
    </div>
    
    <div style="height:100px; width:100px; margin-top:40px; margin-left:20px; background-color:red; position:absolute;">
        GRAPH
    </div>
    
    <div style="height:100px; width:100px; margin-top:90px; 
    background-color:orange; position:absolute; z-1;">
        <h2>Bottom Label</h2>
    </div>
</div>

Answer 1

您应该使用

z-index

而不是仅使用

z

。在您的情况下，因此，元素会应用默认的

z-index

，因此它们会按堆叠顺序显示，HTML 中较低的元素会呈现较高的位置。因此，您有两个选择：

1. 只需使用

   z-index: 2

   代替

   z-2

2. 或者您可以简单地在 HTML 中设置正确的所需顺序。因此您可以将标签放在图表后面。