CSS3 - 如何覆盖父元素的填充？

Question

我有一个使用此代码的圆形div元素：

#circle{
width: 320px;
height: 320px;
background-image: url('image.jpg');
border-radius: 50%;
background-position: 50% 50%;
transition: all 1s;
}

使用此代码扩展悬停：

#circle:hover{
margin-top:-50px;
width: 400px;
height: 400px;
}

现在这个div元素在一个矩形形状的另一个div元素中，或者像某些人所说的那样，具有50px的填充。 当圆圈展开时，圆圈的顶部隐藏在填充下方。想象一下，圆圈的顶部被截断，而50px填充就在那里。

我想要的是，它会覆盖填充。它只是显示在填充上方，我希望你得到我在这里想说的话......如果没有，我会尝试以更好的方式解释。提前谢谢！

Answer 1

不幸的是，没有css可以访问项目的父元素。

我找到了this thread，其中概述了如何完成此任务。

Answer 2

您可以使用＆＃34; position＆＃34;或＆＃34;显示＆＃34;。我希望http://css-tricks.com/absolute-positioning-inside-relative-positioning/可以帮助你

Answer 3

您如何使用z-index？

圆形元素

z-index: 2;

和父元素：

z-index: 1;