Css 子对象与其父对象重叠'；悬停的兄弟姐妹

下面是第一个

div

：

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

我想要的是： 当我将鼠标悬停在

#parent

上时，我希望

#important#u text

（只是

h3#important#u text

，而不是整个

div

！）与

#兄弟姐妹

（实际上是他的孩子

img

）。当我没有悬停在

#parent

上时，我希望

#sibling

重叠

#parent

我已经用

z-index

尝试过了，但我无法让

#重要_文本

与其父级的同级重叠（

#同级

）

---

编辑：

已使用（未使用CSS）：

---

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

CSS:

---

你能提供你使用过的CSS吗？嗨，我很乐意帮助你，但请展示更多的代码。包括CSS。你可以用我为你准备的小提琴。你能解释一下或者直观地告诉我们你期望什么，或者你想创造什么样的效果吗？也许有比你现在尝试的更好的方法。我已经发布了OP中使用的CSS示例。你的div大小是多少？（宽度/高度）您也可以使用Javascript实现这一点。看看小提琴：这不是我想要的。这与父级重叠（已重叠）。。。我希望它与父母的兄弟姐妹重叠。定位很好，“层”被搞砸了，我想不出一个解决方案。好的，我已经更新了一点小提琴（定位必须保持绝对）。当您将鼠标悬停在“家长”上时，h3背景会变为黄色。我想要的是，黄色重叠的兄弟姐妹。现在它在兄弟姐妹之下，但我希望它在兄弟姐妹之上。看看代码，黄色应该会从20px扩展到#兄弟。我希望你能理解…所以当你悬停在#父对象上时，你希望黄色部分的宽度为20px，与下一个元素重叠？不。。父级宽度为120px，同级宽度为100px。但是由于#兄弟的位置是绝对的，并且是左：100px，所以整个#父div没有显示（20px是“切断的”，因为它与#父div重叠）。我想要的是：当我将鼠标悬停在#parent上时，#important#u文本显示其全宽（120px），并且不再隐藏在#sibling下。

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

#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. */

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