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 элемент находится внутри другого сНу элемента в форма прямоугольника или ящик, как можно было бы сказать, который имеет отступы на 50 пикселей. Когда круг расширяется, верхняя часть круга спрятана под дополнением. Представьте, что это так, верхняя часть круга обрезается, а наложение 50px есть.

То, что я хочу, будет переопределять заполнение. он просто будет показывать над дополнением, надеюсь, вы получите то, что я пытаюсь здесь сказать ... Если нет, я попытаюсь объяснить лучше. Заранее спасибо!

Answer 1

К сожалению, нет css, который может получить доступ к родительскому элементу элемента.

Я нашел this thread, в котором описывается, как вы можете выполнить эту задачу.

Answer 2

Вы можете использовать «положение» или «отображение». Я надеюсь, что это http://css-tricks.com/absolute-positioning-inside-relative-positioning/ может вам помочь

Answer 3

Как вы пробовали с z-index?

круглый элемент

z-index: 2; 

и родительский элемент:

z-index: 1;