html - Using z-index to sort SVG objects, parent containers and text -
i overlay svg objects on top of container, text in container must accessible user's mouse (in other terms, put text forward without it's parent following, vice-versa). current situation:
i have 2 svg objects, style of z-index: 2
. then, have <div>
container style of z-index: 1
, , finally, div contains child <text>
element style of z-index: 3
. understanding of how z-index works, svgs should overlay container, text should stand out.
however, appears text follows parent z-index , gets overlaid svgs. how should proceed keep text above svgs, while container remains behind?
you need set <text>
element position: relative;
or position: absolute;
. doing that? if not won't work.
body { padding: 0; margin: 0; } div { background-color: yellow; width: 300px; height: 150px; z-index: 1; } text { font-size: 40px; z-index: 3; position: relative; } svg { position: absolute; top: 0px; z-index: 2; }
<div> <text>some text here</text> </div> <svg> <circle cx="150" cy="75" r="75" fill="red"/> </svg>
Comments
Post a Comment