Почему дочерний элемент не перемещается относительно своего родителя?

Question

Я хочу, чтобы дочерний элемент был go вниз относительно своего родительского элемента, но дочерний элемент опускается вниз относительно всего html файла.

.parent{
  border: 2px solid red;
  padding: 10px 10px;
  position: relative;
}
.child{
  position:absolute; top:5px;
}


HTML Code:

<h1 class="parent">Hello World</h1>

<h2 class="child">Bye World</h2>

Answer 1

В вашем случае h1 и h2 называются братьями и сестрами, а не родителем и потомком. Вы можете узнать больше на здесь .

И не следует использовать h1 в качестве родительского элемента h2. Вы можете использовать div в качестве родителя.

Пример

.parent{
  border: 2px solid red;
  padding: 10px 10px;
  position: relative;
}
.child{
  position:absolute;
  top:5px;
}
.txt-xl {
  font-size: 24px;
}
.txt-l {
  font-size: 16px;
}

<div class="parent">
  <span class="txt-xl">Hello World</span>
  <span class="child txt-l">Bye World</span>
</div>

Answer 2

Дочерний должен находиться внутри родительского элемента. так что он может быть относительно родительского элемента.

<h1 class="parent">
 Hello World
 <h2 class="child">Bye World</h2>
</h1>

CSS

.child{
  position:absolute; top:auto; bottom: 5px
}

https://www.w3schools.com/cssref/sel_element_gt.asp

Answer 3

Дочерний элемент должен находиться внутри родительского элемента, чтобы это учитывать.

Пример:

<h1 class="parent">
 Hello World
 <h2 class="child">Bye World</h2>
</h1>