Question

我有两个互相嵌套的div。

div1嵌套在div2中。

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

我该怎么做？或者我的错误在哪里？我试图将两者都包装成一个更大的div并设置z-indices使得div2是最低的，div1是中间的，而包装器div是最高的。理由是，一旦离开蓝色div，红色的一个就会消失在包装纸下 - 不起作用。

就像现在一样，红色div只是移动得更远，无论是在蓝色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

1 个答案: