Consider this snippet of HTML code:
<div style="background-color: blue">
<div style="color: red">
some content some content some content some content
</div>
</div>
<div id="highlight" style="top: 0px; width: 200px; height: 40px;
background-color: yellow; position: fixed">
</div>
This is how it appears:
https://i.sstatic.net/bHyaW.png
The objective is to visually place the #highlight <div> between the blue background and the text. The desired outcome is shown below:
https://i.sstatic.net/hPjQQ.png
In a real-life scenario, JQuery is used to manipulate the position of #highlight based on mouse/keyboard events. The hierarchy of the containing <div>s cannot be altered.
The #highlight's position must either be fixed or absolute.
Is there a way to achieve the desired result without modifying the HTML structure? Attempts have been made with z-index, but the hierarchical structure takes precedence. Any unconventional methods involving JavaScript/JQuery are welcome.