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

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -