Вопрос:
У меня есть два div, один вложенный внутри другого. Родительский элемент имеет определенную ширину/высоту. Как показать дочерний div над родителем (вне его), используя только CSS?
EDIT: Извините, может быть, я должен уточнить, что я имею в виду “выше” по оси z. И да, я уже пробовал z-index. Моя проблема в том, что когда дочерний элемент больше родительского, это приводит к эффекту “frame” или “window”, отсекая часть div.
Лучший ответ:
Установите overflow: visible; в родительском div.
#parent { overflow: visible; }
Изменено, чтобы отразить обновление для респондентов.
Ответ №1
Сделайте это так:
.child { position: absolute; margin: -100px; }
Использование положения: абсолютное будет избавляться от пустого пространства, оставленного дочерним элементом при его смещении вверх.
Изменить – после прочтения вашего обновления: положение: абсолютное значение сохраняется и для этой ситуации. Он выводит ребенка из родителя. Затем вы используете поля, чтобы разместить их так, как вы хотите.
Таким образом вы можете сделать ребенка большим, чем родительский и над ним.
.parent{ height: 50px; width: 50px; } .child { position: absolute; height: 100px; width: 100px; margin: -75px 0 0 -75px; } Ответ №2
Если вы уверены, что вам нужно это сделать, попробуйте поставить
margin-top: -100px; на дочернем элементе или, как бы то ни было, много px необходимо, чтобы оно отображалось выше.
Ответ №3
Вы можете использовать определение позиции, чтобы позиционировать его относительно или абсолютно на странице. IE:
Чтобы показать его непосредственно выше, вы замените 100px в этом выражении размером дочернего окна.
.child{ position: relative; top: -100px; } Ответ №4
Подобно тому, что сказал Чача, вы должны дать родительскому положению относительное, а потом ребенку положение абсолютное, а затем дать ребенку верх: -100px.
У родителя переполнение установлено в скрытое? Это может помешать вашим усилиям.
Ответ №5
Вы можете установить отрицательный запас для своего родительского элемента, смещенный отступом – например, margin-left: -100px; padding-left 100px. Это даст вам 100px влево, где ребенок может перекрываться и все еще быть на вершине.
