CODEWITHSUNDEEP
javascripthtmlcssd3.jsnvd3.js
SpicyClubSauce
SpicyClubSauce

Reputation: 4266

HTML + (NV)D3: Can't place a div on top of a div of the chart even with > z-index

so I have some HTML that looks like this:

<div id="container">
    <svg id="chart1"></svg>
    <div id='logo'>
        <img id="logo" src="cubs_best.png";>
    </div>
</div>

With corresponding CSS like,

    svg {
        /*display: block;*/
        position: relative;
        z-index: 1;
    }
    html, body, #container, svg {
        margin: 0px;
        padding: 0px;
        height: 80%;
        width: 100%;
    }
    #logo {
        position: absolute;
        z-index: 10;
        top: 15px
        left: 15px;
    }

you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)

But this is what it shows, and it won't budge.

enter image description here

Edit

#container {
            position: relative;
        }

didn't change anything sadly enough.

The whole code (minus Javascript underneth that makes the D3 graph/svg):

enter image description here

Upvotes: 0

Views: 414

Answers (1)

Mug&#233;
Mug&#233;

Reputation: 472

Have you tried following sequence to get logo to the top of the chart:

<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>

Also, remove semicolon at the end of img holder <....src="cubs_best.png";>

Upvotes: 1

Related Questions