Grid Alignment when using absolute-images (Boostrap)-CodePudding

im new to coding in general and new to this site so sorry if I am doing anything wrong. I wanted to create a picrew-like site and have run into a problem. I want to align it so the character is on top and the buttons to choose other options are at the bottom: image link

But at the moment the whole alignment is just wonky at best and disastrous if I'm being honest. I am pretty sure its because of the relative and absolute positioning, but thats the only way I found how to add pictures ontop of eachother (like, putting the eyes onto the head).

<body>
        <div >
            <div >
              <div >
                <div >
                    navbar soon to be
                </div>
              </div>
            </div>
            <div >
              <div >
                <div >
                    <img  id="body-section" src="/testImage/body_default.png"  alt="Default Body" width=400px;/>
                    <img  id="head-section" src="/testImage/head_default.png"  alt="Default Head" width=400px;/>
                    <img  id="ears-section" src="/testImage/ears_default1.png"  alt="Default Ears" width=400px;/>
                    <img  id="eyes-section" src="/testImage/eyes_default.png" alt="Default Eyes" width=400px;/>
                    <img  id="mouth-section" src="/testImage/mouth_default.png" alt="Default Mouth" width=400px;/>
                    <img  id="nose-section" src="/testImage/nose_default.png" alt="Default Nose" width=400px;/>
                    <img  id="eyebrows-section" src="/testImage/eyebrows_default.png" alt="Default Eyebrows" width=400px;/>
                </div>
              </div>
            </div>
            <div >
              <div >
                <div >
                    <ul >
                        <li >X-Type</li>
                        <li >X-Type</li>
                        <li >X-Type</li>
                        <li >X-Type</li>
                    </ul>
                </div>
              </div>
            </div>
            <div >
              <div >
                <div >
                    <ul >
                        <li ><button onclick="changeImage('/testImage/ears_default1.png')"><img src="/testImage/ears_default1.png" width="108px" height="192px"/></button></li>
                        <li ><button onclick="changeImage('/testImage/ears_default2.png')"><img src="/testImage/ears_default2.png" width="108px" height="192px"/></button></li>
                        <li ><button onclick="changeImage('/testImage/ears_default3.png')"><img src="/testImage/ears_default3.png" width="108px" height="192px"/></button></li>
                        <li ><button onclick="changeImage('/testImage/ears_default4.png')"><img src="/testImage/ears_default4.png" width="108px" height="192px"/></button></li>
                        <li ><button onclick="changeImage('/testImage/ears_default5.png')"><img src="/testImage/ears_default5.png" width="108px" height="192px"/></button></li>
                    </ul>
                </div>
              </div>
            </div>
          </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="script.js"></script>
    </body>

CodePudding user response：

Managing a complex layout with absolutely positioned elements is possible, but tricky. Consider using display: grid (handy reference here)!

Lay out your grid areas as you expect your facial features to appear (eyes, nose, ears, mouth, what-have-you). You can constrain them to fixed widths and heights, and play with the inner content alignment as you see fit. If body parts take up more than one grid area, then you may need to be clever with the grid-template-areas property. You can still use position: absolute within the grid areas.

Here's a little demo I whipped up with a very uninspiring face:

.container {
  padding: 2rem 0;
}

.head {
  border: 1px solid black;
  border-radius: 50%;
  display: grid;
  grid-template-areas:
    "left-eye right-eye"
    "nose nose"
    "mouth mouth";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  padding: 1rem;
  width: 100px;
  height: 100px;
}

/* Use display: flex; to vertically and horizontally 
   center elements within the grid areas */
.body-part {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-eye {
  grid-area: left-eye;
}

.right-eye {
  grid-area: right-eye;
}

.nose {
  grid-area: nose;
}

.mouth {
  grid-area: mouth;
}

<div >
  <div >
    <div >0</div>
    <div >0</div>
    <div >|</div>
    <div >______</div>
  </div>
</div>
<div >
  Controls, etc. here
</div>