使用 z-index 覆盖移动（和嵌套）的 div

Question

我有两个 div 相互嵌套。

div1 嵌套在 div2 中。

这是我的问题：红色 div (div1) 在 div2 内移动，我希望 div1 在越过边界时消失div2。换句话说，如果红色 div 离开蓝色表面，它应该消失。

我该怎么做或者我的错误在哪里？我试图将两者包装成一个更大的 div 并设置 z-indices 以便 div2 是最低的，div1 是中间的，而包装器 div最高。基本原理是一旦离开蓝色就让红色的消失在包装纸下 div - 没有用。

就像现在一样，红色div不管在蓝色[=31=之内还是在蓝色div之外，都是越走越远。

HTML

<div id="div2">
<div id="div1"></div>
</div>

CSS

#div1{
width: 30px;
height: 30px;
background-color: red;
position: absolute;
top: 20%;
left: 20%
}
#div2{
width: 300px;
height: 300px;
background-color: blue
}

Answer 1

我想这就是你想要的（简单地说知道我知道，哈哈）:

#div2 {
overflow: hidden;
}

顺便说一句，你可以说 #div1 位于 #div2 内，但它不是定位的，因为绝对属性.它将根据第一个定位的父级（不是 #div2）或 body :

https://jsfiddle.net/5a1w6hd0/

当父级有相对定位时（可以是任何东西，只要它不是静态的）：

https://jsfiddle.net/5x2bcyqe/

溢出属性仍然有效（这是无关的）。设置 z-index 也可能很棘手 - 元素需要定位才能生效。

使用 z-index 覆盖移动（和嵌套）的 div

Use z-index to overlay moving (and nested) divs

html

css

z-index