javascript - 在单独层次结构的两个元素之间显示 <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> 的层次结构s 包含文本。

我需要 #highlight的 position要么是fixed或 absolute .

有什么方法可以在不更改 HTML 结构的情况下实现当前结果？我尝试使用 z-index ，但它不起作用，因为层次结构优先于它。我对任何涉及 JavaScript/JQuery 的肮脏黑客行为持开放态度。

Answer 1

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

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