CODEWITHSUNDEEP
css
paulinho
paulinho

Reputation: 302

Stacking Non-Sibling Elements in CSS

I have some HTML code produced from a script which draws an interactive tree like this one:

<svg width="1200" height="500">
    <g class="node" transform="translate(0, 242.3076934814453)">
        <circle class = "node" />
        <foreignobject class = "preview" />
    </g>
    <g class="node" transform="translate(0, 242.3076934814453)">
        <circle class = "node" />
        <foreignobject class = "preview" />
    </g>
    <g class="node" transform="translate(0, 242.3076934814453)">
        <circle class = "node" />
        <foreignobject class = "preview" />
    </g>
</svg>

And so on (there are many more <g class="node"> children of the parent <svg>). The <foreignobject> is an element meant to represent a preview box that is displayed upon hovering on the node. In some cases, the area occupied by the preview box when shown will overlap with the <circle> element from another node. In this case, I would like the preview to be stacked on top of any circle element, but I haven't been able to find a solution that is able to represent stacking relationships amongst elements that do not share the same direct parent (e.g. z-index). I'm looking for a solution that would not require me to restructure the relationships between these HTMl elements. Currently, it seems as if the some of the foreignobjects are actually under the circles of the other nodes.

Ideally, I would be able to specify some property(ies) like z-index in the CSS for preview and node.circle that would yield the desired behavior. Of course, if this is too optimistic, I would still like to know what a working solution could look like. Thanks!

Upvotes: 0

Views: 75

Answers (1)

black blue
black blue

Reputation: 819

Z-index doesn't need the same direct parent. By default everything on the page is inside <body>

body{ z-index: 0}               /* by default */
nav{ z-index: 1}                /* it puts <nav> above the <body> */
div{ z-index: -1}               /* it puts <div> below, behind the <body> */

It was just for your info as I think you are looking for position not z-index, I believe you need something like this:

g:hover::after{ position: absolute; content: '*foreignobject*'}
    /* if foreignobject can be putted into css...  or simpler: */
g:hover foreignobject{ position: absolute; height: 50vh; width: 50vw}

Css content has limitations, it's not HTML, if foreignobject is an image or plain text you are in luck!
The ::before and ::after elements can be displayed with more complicated relations - look at the snippet, ugly but simple
position can have co-ordinates top bottom right left relative to main parent - <body> or (if exists) nearest parent with position. Usual it is used as:
parent{ position: relative} without any co-ordinates just to set it as a parent for absolute, relative, fixed children.

body{ text-align: center}
div{ background: yellow; width: 200px;}
p{ font: normal 14px verdana, sans-serif}
div:hover p::after{ content: "I'm big red css \A div:hover p::after \A"; font: normal bold 42px time, serif; background: red; width: 100vw; position: absolute; top: 50vh; padding: 100px; display: block; white-space: pre} 
<div><p>paragraph</p></div>

Upvotes: 1

Related Questions