I'm new to CSS and trying to create a list fixed in the page. The page shows an object by three.js, I can move or zoom the object. 
I want a list of text shown in the page unchanged no matter how I move the object. 

```css
#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;
}
```

```html
<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>
```

You can see that the list items are overlayed. What I want is "Item 1" and "Item 2" in the first "Pre assemble 1" and the other two items in "Pre assemble 2" just after the first assemble.
Could someone help me with this?