在单独层次结构的两个元素之间显示<div>

Question

考虑以下HTML：

<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>

on jsfiddle

看起来像这样：

我想要做的是将#highlight <div>直观地放在蓝色背景和文本之间。这就是我想要的样子：

我正在使用这个奇怪的<div>层次结构，就像在我的现实场景中我正在使用JQuery来移动#highlight一些鼠标/键盘事件。我也无法控制包含文本的<div>的层次结构。

我需要#highlight的{​​{1}}为position或fixed。

有没有办法在不改变HTML结构的情况下实现我当前的结果？我尝试使用absolute，但由于层次结构优先于它。我对任何涉及JavaScript / JQuery的肮脏黑客持开放态度。

Answer 1

在内容div上，设置z-index:1和position:relative。

＆＃13;

＆＃13;

<div style="background-color: blue;">
  <div style="color: red; z-index: 1;position:relative;">
    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>

＆＃13;

＆＃13;

＆＃13;