positionner modifier un objet dans ma page sans la repousser

Bonjour, je suisplus que novice en la matière. j'ai trouvé une animation sur internet que j'essaie de modifier et d'intégrer à mon site mais je n'ai pas l'effet escompté.

html:

<div class="component">
        <ul class="align">
          <li>
            <figure class='book'>

              <!-- Front -->

              <ul class='hardcover_front'>
                <li>
                  <div class="coverDesign blue">
                    <h1>Coups d'Choeur</h1>
                    <p>REPERTOIRE</p>
                  </div>
                </li>
                <li></li>
              </ul>

              <!-- Pages -->

              <ul class='page'>
                <li></li>
                <li>
                  <a class="btn" href="/REPERTOIRE.htm">Accéder au Répertoire</a>
                </li>
                <li></li>
                <li></li>
                <li></li>
              </ul>

              <!-- Back -->

              <ul class='hardcover_back'>
                <li></li>
                <li></li>
              </ul>
              <ul class='book_spine'>
                <li></li>
                <li></li>
              </ul>
              <figcaption>
              </figcaption>
            </figure>
          </li>
        </ul>
      </div>

Ce que je veux

• je souhaiterais pouvoir positionner le livre ou je veux, facilement, et l'intégrer dans ma page (mais qu'il reste fixe)
• je souhaiterais mettre deux ou trois boutons text cliquables de plus à l'intérieur du livre
  -idéalement pouvoir remplacer sa couverture par une image, mais ça n'est pas le plus important

Ce que j'obtiens

le livre est bien fixe, mais il repousse le reste de mon site au dessous de lui

Merci pour votre aide, j'ai essayé de bidouillé n'ayant pas de connaissances, mais rien n'y fait. Un simple positionnement n'est pas aisé pour un néophyte...