У меня есть два div, один внутри другого. Родительский элемент имеет определенную ширину/высоту. Как я могу показать дочерний div над родительским (вне его), используя только CSS?
РЕДАКТИРОВАТЬ: Извините, может быть, мне следует уточнить, что я имею в виду «выше» вдоль оси z. И да, я уже пробовал z-index. Моя проблема в том, что когда дочерний элемент больше родительского, это приводит к эффекту «рамки» или «окна», отсекая часть div.
Установите overflow: visible; в родительском div.
#parent {
overflow: visible;
}
Изменено, чтобы отразить обновление спрашивающего.
overflow: hidden?
- person huykon225; 14.04.2018
Вы можете использовать определение положения, чтобы расположить его относительно или абсолютно на странице. IE:
Чтобы показать это прямо выше, вы должны заменить 100px в этом выражении на размер дочернего блока.
.child{
position: relative;
top: -100px;
}
Сделайте это следующим образом:
.child {
position: absolute;
margin: -100px;
}
Использование position: absolute избавится от пустого пространства, оставленного дочерним элементом, когда он сместится вверх.
Изменить - после прочтения вашего обновления: position: absolute по-прежнему применимо и к этой ситуации. Это выводит ребенка из родителя. Затем вы используете поля, чтобы расположить его так, как хотите.
Таким образом, вы можете сделать дочерний элемент больше родителя и выше его.
.parent{
height: 50px;
width: 50px;
}
.child {
position: absolute;
height: 100px;
width: 100px;
margin: -75px 0 0 -75px;
}
Если вы уверены, что вам нужно это сделать, попробуйте поставить
верхнее поле: -100px; на дочернем элементе или столько пикселей, сколько необходимо, чтобы он отображался выше.
Подобно тому, что сказал Чача, вы должны указать родителю относительную позицию, а дочернему — абсолютную, а затем указать дочернему элементу top: -100px.
У родителя установлено скрытое переполнение? Это может помешать вашим усилиям.
Вы можете установить отрицательное поле для родительского элемента, смещенное отступом, например, margin-left: -100px; отступ слева 100px. Это даст вам 100 пикселей влево, где дочерний элемент может перекрываться и оставаться сверху.
