Показать дочерний элемент над родительским элементом с помощью CSS

У меня есть два div, один вложенный внутри другого. Родительский элемент имеет определенную ширину/высоту. Как показать дочерний div над родителем (вне его), используя только CSS?

EDIT: Извините, может быть, я должен уточнить, что я имею в виду "выше" по оси z. И да, я уже пробовал z-index. Моя проблема в том, что когда дочерний элемент больше родительского, это приводит к эффекту "frame" или "window", отсекая часть div.

ОТВЕТЫ

Ответ 1

Установите overflow: visible; в родительском div.

#parent {
    overflow: visible;
}

Изменено, чтобы отразить обновление для респондентов.

Ответ 2

Сделайте это так:

.child { 
position: absolute; 
margin: -100px;
}

Использование положения: абсолютное будет избавляться от пустого пространства, оставленного дочерним элементом при его смещении вверх.

Изменить - после прочтения вашего обновления: положение: абсолютное значение сохраняется и для этой ситуации. Он выводит ребенка из родителя. Затем вы используете поля, чтобы разместить их так, как вы хотите.

Таким образом вы можете сделать ребенка большим, чем родительский и над ним.

.parent{
height: 50px;
width: 50px;
}
.child {
position: absolute;
height: 100px;
width: 100px;
margin: -75px 0 0 -75px;
}

Ответ 3

Если вы уверены, что вам нужно это сделать, попробуйте поставить

margin-top: -100px; на дочернем элементе или, как бы то ни было, много px необходимо, чтобы оно отображалось выше.

Ответ 4

Вы можете использовать определение позиции, чтобы позиционировать его относительно или абсолютно на странице. IE:

Чтобы показать его непосредственно выше, вы замените 100px в этом выражении размером дочернего окна.

.child{
    position: relative;
    top: -100px;
}

Ответ 5

Подобно тому, что сказал Чача, вы должны дать родительскому положению относительное, а потом ребенку положение абсолютное, а затем дать ребенку верх: -100px.

У родителя переполнение установлено в скрытое? Это может помешать вашим усилиям.

Ответ 6

Вы можете установить отрицательный запас для своего родительского элемента, смещенный отступом - например, margin-left: -100px; padding-left 100px. Это даст вам 100px влево, где ребенок может перекрываться и все еще быть на вершине.