孩子在悬停时重叠其父母的兄弟姐妹

Question

所以，这是第一个div：

<div id="parent">
<a>
<div>
<img />
<h3 id="important_text">text</h3>
</div>
</a>
</div>

第二个div结构或多或少相同......

<div id="sibling">
<a>
<div>
<img />
<h3 id="important_text_n2">text</h3>
</div>
</a>
</div>

我想要的： 当我悬停#parent时，我希望#important_text（仅h3#important_text，而不是整个div！）重叠#sibling（他的孩子img实际上）。当我没有徘徊#parent时，我希望#sibling重叠#parent。

我已尝试使用z-index，但我无法让#important_text重叠其父母的兄弟（#sibling）。

---

编辑：

已使用（不使用CSS）：

#parent {
z-index: 5;
}
#sibling {
z-index: 15;
}
/* option 1 */
#parent:hover a div h3 {
    z-index: 20;
}
/* option 2 ... here I wanted to decrease the sibling img's z-index to a value between #parent and #important_text, but I didn't work either. */

Answer 1

给H3元素一个绝对位置。例如：

CSS：

h3{
   position:absolute;
   margin-top: -20px;
}