Задать вопрос
@ZaxapKramer
Больной верстальщик

Вертикальное позиционирование дочернего элемента с position:relative;top:(some)%, почему не работает?

Здравствуйте, коротко о главном:

немного кода
<div class="parent">
  <div class="child child1"></div>
  <div class="child child2"></div>
</div>

.parent {
  height: 100px;
  background: #999
}
.child {
  width: 10px;
  height: 10px;
  background: #ddd
}
.child1 {
  position: relative;
  transform: translateY(-100%);
  top: 30%;
  left: 30%
}
.child2 { height: 90px }
или
то же самое на jsfiddle.

Если убрать у контейнера фиксированную высоту, то у дочерний элемент с top: 30% перестает смещаться по вертикали.
Почему так происходит? Просто не имею понимания, почему, и можно ли как-то заставить "это" работать (именно с position: relative и top/bottom: (some)%)?

P.S. Предполагается, что transform: translateY((some)%) уже используется (в примере тоже).
  • Вопрос задан
  • 163 просмотра
Подписаться 1 Оценить 4 комментария
Решения вопроса 1
@ZaxapKramer Автор вопроса
Больной верстальщик
Сергей написал в комментариях:
Если у элемента не задана высота, то процент от чего брать? =)
Не работают проценты высоты, без явного ее указания родителю.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы