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

Question

[ZaxapKramer]

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

немного кода

<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)%) уже используется (в примере тоже).

Comments

[Сергей delphinpro]

Если у элемента не задана высота, то процент от чего брать? =)
Не работают проценты высоты, без явного ее указания родителю.

[ZaxapKramer]

Сергей, я всегда думал, что top и bottom работают так: берут % от величины контейнера. А в данном случае можно это решить как-то?
Может, есть какой-нибудь "двойной" transform: translateY((some)%), который будет брать высоту родителя..?:) Решение с "таблицами" не подходит, другие оккультные вещи (которые мне известны) тоже.

[Сергей delphinpro]

работают так: берут % от величины контейнера.

так и работают. но величина-то не задана. height - auto

[ZaxapKramer]

Сергей, у таблиц с этим все проще, но только с ними, если не ошибаюсь.

Answer 1

[ZaxapKramer]

Сергей написал в комментариях:

Если у элемента не задана высота, то процент от чего брать? =)
Не работают проценты высоты, без явного ее указания родителю.