Исправить список нескольких слоев на странице

Question

Я новичок в CSS и пытаюсь создать список, зафиксированный на странице. На странице объект отображается на 3. js, я могу перемещать или масштабировать объект. Я хочу, чтобы список текста, отображаемого на странице, оставался неизменным, независимо от того, как я перемещаю объект.

#info-title {
  text-decoration: underline;
  position: absolute;
  width: 100%;
  z-index: 100;
  display:block;
}

ul.content{
  list-style-type: disc;
  position: absolute;
  width: 100%;
  z-index: 100;
  display:block;
}

ul.section{
  list-style-type: none;
  position: absolute;
  width: 100%;
  z-index: 100;
  display:block;
}

<div id="info-title">Description</div>
<div>
  <ul class="section">
    <li>Pre assemble 1</li>
    <ul class="content">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <li>Pre assemble 2</li>
    <ul class="content">
      <li>New item 3</li>
      <li>New item 4</li>
    </ul>
  </ul>
</div>
</div>

Вы можете видеть, что элементы списка перекрываются. Мне нужны «Элемент 1» и «Элемент 2» в первом разделе «Предварительная сборка 1» и два других элемента в «Предварительной сборке 2» сразу после первой сборки. Может ли кто-нибудь помочь мне с этим?

Answer 1

Создайте родительский div и задайте ему позицию absolute. Вам не нужно указывать позицию по каждому ребенку.

Answer 2

Думаю, это может вам помочь.

.container-absolute {
  position: absolute;
  top: 0;
  left: 0;
  
}
#info-title {
  text-decoration: underline;
  width: 100%;
  z-index: 100;
  display:block;
}

ul.content{
  list-style-type: disc;
  width: 100%;
  z-index: 100;
  display:block;
}

ul.section{
  list-style-type: none;
  width: 100%;
  z-index: 100;
  display:block;
}

 <div class="container-absolute">
<div id="info-title">Description</div>
<div>
  <ul class="section">
    <li>Pre assemble 1</li>
    <ul class="content">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <li>Pre assemble 2</li>
    <ul class="content">
      <li>New item 3</li>
      <li>New item 4</li>
    </ul>
  </ul>
</div>
</div>
</div>