Search code examples
htmlcssbootstrap-5overlay

Bootstrap label overlay

I have a div with some html producing a complex graph. I need to put on label on top and one on the bottom of the graph overlaying the graph div (ideally covering 10% of the top and the bottom of the graph div area).

I am trying a mock example below but I cannot find why only the bottom label works. How to overlay the top label on the graph div? What am I missing? Is is possible to do it as a % of the graph div area?

<div class="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>

Solution

  • You should use z-index instead of just z. In your case, because of this, there is a default z-index applied to elements, so they appear in their stacking order, with the element lower in the HTML being rendered higher. Therefore, you have two options:

    1. Just use z-index: 2 instead of z-2
    2. Or you can simply set the correct desired order in HTML. So you can place your labels right after your chart.