I am facing an issue with my HTML and CSS code. Here is what it looks like:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
Accompanied by the following CSS:
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;
}
Despite the CSS rules, the image div is not displaying on top as expected. It seems to be stuck in its position.
https://i.sstatic.net/wP6Oj.png
Edit
#container {
position: relative;
}
Even after making this adjustment, the issue persists.
Here is the entire code (excluding the Javascript used for the D3 graph/svg):