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

Question

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

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

Answer 1

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

#parent { 
    overflow: visible; 
} 

Изменено, что бы отразить это.

Answer 2

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

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

Answer 3

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

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

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

Answer 4

ли это так:

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

Использование позиции: абсолютная избавится от пустого пространства, оставленного ребенка, когда он сдвигается вверх.

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

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

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

Answer 5

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

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

Answer 6

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