Question

我有以下代码，并希望内部div与类：escaping-container将显示在带有类容器的外部div的前面。

内部div的高度设置比外部div高。所以它的一部分被切断了。

还必须显示由外部div切割的部分。

<style type="text/css">

div.container{
  width: 100px;
  height:100px;
  overflow-x:scroll;
  overflow-y:hidden;
  position:relative;
  z-index:1;
}

div.escaping-container{
  width:50px;
  height:150px;
  position:relative;
  z-index:10;
  background-color:red;
}

</style>

<div class ="container">
  <div class="escaping-container"></div>
</div>

我尝试通过设置z-index来完成此操作，但它不起作用。任何帮助将不胜感激。

Answer 1

我担心你的问题是矛盾的。如果希望内部div可见，则必须删除overflow-x和overflow-y css语句。

Answer 2

如果需要溢出设置试试这个http://jsfiddle.net/sandeep/59nGZ/

的CSS：

div.container{
  width: 100px;
  height:100px;
  overflow-x:scroll;
  overflow-y:hidden;
    border:1px solid red;
}

div.escaping-container{
  width:50px;
  height:150px;
  position:absolute;
  background-color:red;
}

Answer 3

您将无法将内部<div>置于父级之外且overflow设置为滚动，隐藏或自动。要做到这一点，您需要更改标记，或从CSS中删除overflow - 属性。

内部div应显示在外部div的前面

3 个答案: