z-index和溢出没有正确显示div

Question

我正在开展一个项目，当用户将鼠标悬停在一个盒子上时，我正在显示消息，我已经创建了一个方案来模拟我遇到的问题。

蓝色框应该显示为已定义的完整250px并且不会被剪裁到包含div设置为的200px，无论如何要绕过它，我可以坐在包含div的外面的蓝色框作为其全部需要自包含的UserControl的一部分。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

变化：

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

}

要

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

}

换句话说，删除溢出：隐藏，蓝色div将按您的意愿显示。

Answer 2

不完全确定这是你所追求的，但你需要做的就是将first div上的溢出从隐藏更改为可见：

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: visible;  /* change this */
}

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

正如Wired所说，你必须从#first元素中删除overflow: hidden;。否则，如果它们应该到达它的边界之外，那么内部的所有元素都将被切断。

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

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

#fourth
{
    width: 250px;
    height: 50px;
    background-color: blue;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
}

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