html - z-index 和 overflow 不能使 div 正确显示

Question

我正在做一个元素，当用户将鼠标悬停在一个框上时我会显示消息，我创建了一个场景来模拟我遇到的问题。

蓝色框应该显示为定义的完整 250px，而不是被裁剪到包含 div 设置的 200px，无论如何要解决这个问题，我可以将蓝色框放在包含 div 外面作为它的全部需要自包含的 UserControl 的一部分。

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
}

#fourth
{
    width: 250px;
    height: 50px;
    background-color: blue;
    position: absolute;
    z-index: 100;
}

<div id="first">
    <div id="second">
      <div id="fourth">
      test
      </div>      
    </div>
</div>

Answer 1

改变:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;

到

#first {
width: 200px;
height: 200px;
background-color: green;

换句话说，移除 overflow: hidden，蓝色的 div 就会如你所愿地出现。