Абсолютное позиционирование CSS не переходит к родителю, родитель является относительным

Question

Я пытаюсь расположить текст внутри элемента div, который встречается несколько раз.

У каждого ребенка есть позиция: абсолютная; и каждый родитель имеет положение: относительное;

    .parent{
    width: 24%;
    display: inline-block;
    float: left;
    border-left: 1px solid #FFA500;
    position: relative;
    }

    .child{
    display: inline-block;
    line-height: 1.5;
    height: 5%;
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(0px, 100%) rotate(90deg);
    overflow: hidden;
    float: right;
}

Из детей перейти в то же самое место на странице, которая, кажется, первый родительский ребенок. Структура

Parent
    child
close
close

за все 4 дел.

Может кто-нибудь, пожалуйста, помогите?

Answer 1

В вашем css, если у вашего родителя нет содержимого, кроме дочернего элемента div с абсолютной позицией, тогда родитель имеет объявление высоты 0 - так что вам нужно установить высоту родительского элемента div в пикселях, чтобы дать ему место в DOM,

Answer 2

Ваш рост: 5% на.child может быть тем, что скинуло (это было для меня). Это, или может быть другой CSS, который что-то отменяет для вас. Скрипка здесь: https://jsfiddle.net/tagb3yja/

.parent{
  width: 24%;
  display: inline-block;
  float: left;
  border-left: 1px solid #FFA500;
  position: relative;
  background: yellow;
}

.child{
  position: absolute;
  display: inline-block;
  line-height: 1.5;
  top: 0px;
  right: 0px;
  transform: translate(0px, 100%) rotate(90deg);
  overflow: hidden;
  float: right;
  background: silver;
}