Menu
Given an extremely simple SVG in a html file, such as this one:
<html>
<body>
no space between here ><svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>< and here.
</body>
</html>I want to put this in my HTML page as an overlay: I don't want it to take up any space in the DOM, and just appear in the background. How can I do this? I presume it's CSS but I can't figure out the right incantation.
332
Let me know if this helps:
body {
position: relative;
}
svg {
/* absolute positioning takes svg out of flow of the document, it is positioned relative to it's closest parent with 'relative' or 'absolute' positioning, in this case the body */
position: absolute;
/* setting this makes it so that the svg won't eat up any clicks meant for elements underneath it */
pointer-events: none;
/* you can use these offsets to change where exactly the svg is positioned */
top: 0;
left: 0;
}<html>
<body>
no space between here ><svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>< and here.
</body>
</html>You can just use position: absolute to take it out of the page flow:
svg {
position: absolute;
}<html>
<body>
no space between here ><svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>< and here.
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
