Question

在下面的示例中，有一个蓝色div，后面是一个红色div。它们的风格设定有一定的高度。在上面的蓝色div中有另一个div，一个白色div，其内容太长，无法完全显示在上面的蓝色div中。

我希望发生的是白色div覆盖两个div。我不想从蓝色div中删除白色div，因为白色div最终会充当其他项目添加到蓝色div的弹出菜单。所以它属于蓝色div我只想暂时覆盖两个div。

有没有办法让这种情况发生？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>Overlay</title>
<style type="text/css">
#top-div{
  height: 100px;
  background-color: blue;
}
#bottom-div{
  height: 100px;
  background-color: red;
}
#my-list{
  width: 100px;
  background-color: white;
  border: solid 1px black;
}
</style>        
</head>
<body>
<div id="top-div">
  <div id="my-list">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
    </ul>
  </div>
</div>
<div id="bottom-div">I am the footer</div>
</body>  
</html>

Answer 1

是的，在my-list css规则中，添加：

float: left;
position: absolute;

浮点数会将div叠加在背景div上。绝对将阻止背景div中的文本环绕弹出div。

Answer 2

由于父母的z-index比其子女高，因此您需要更改默认的浏览器堆叠行为。将position: relative添加到每个元素，然后在父级及其子级上指定z-index。孩子的z-index应该高于父母。

Answer 3

试试这个：

#my-list{
  width: 100px;
  position:relative;
  z-index: 2;
  background-color: white;
  border: solid 1px black;
}

使内部DIV与另一个外部DIV重叠

3 个答案: