我对一般的编码是新手，对这个网站也是新手，如果我做错了什么，我很抱歉. 我想创建一个类似Picrew的网站，但遇到了一个问题.我想把它对齐，这样字符就在顶部，用于 Select 其他选项的按钮在底部:image link
但老实说，目前整个联盟充其量也只是摇摇欲坠，而且是灾难性的. 我很确定这是因为相对和绝对的位置，但这是我发现如何将图片添加到其他图片上的唯一方法(比如，将眼睛放在头上).
<body>
<div class="container ">
<div class="row">
<div class="col">
<div class="navbar">
navbar soon to be
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="img-display position-relative">
<img class="body-part position-absolute" id="body-section" src="/testImage/body_default.png" alt="Default Body" width=400px;/>
<img class="head-part position-absolute" id="head-section" src="/testImage/head_default.png" alt="Default Head" width=400px;/>
<img class="ears-part position-absolute" id="ears-section" src="/testImage/ears_default1.png" alt="Default Ears" width=400px;/>
<img class="eyes-part position-absolute" id="eyes-section" src="/testImage/eyes_default.png" alt="Default Eyes" width=400px;/>
<img class="mouth-part position-absolute" id="mouth-section" src="/testImage/mouth_default.png" alt="Default Mouth" width=400px;/>
<img class="nose-part position-absolute" id="nose-section" src="/testImage/nose_default.png" alt="Default Nose" width=400px;/>
<img class="eyebrows-part position-absolute" id="eyebrows-section" src="/testImage/eyebrows_default.png" alt="Default Eyebrows" width=400px;/>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="options-menu">
<ul class="test1">
<li class="test">X-Type</li>
<li class="test">X-Type</li>
<li class="test">X-Type</li>
<li class="test">X-Type</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="options">
<ul class="test1">
<li class="test"><button onclick="changeImage('/testImage/ears_default1.png')"><img src="/testImage/ears_default1.png" width="108px" height="192px"/></button></li>
<li class="test"><button onclick="changeImage('/testImage/ears_default2.png')"><img src="/testImage/ears_default2.png" width="108px" height="192px"/></button></li>
<li class="test"><button onclick="changeImage('/testImage/ears_default3.png')"><img src="/testImage/ears_default3.png" width="108px" height="192px"/></button></li>
<li class="test"><button onclick="changeImage('/testImage/ears_default4.png')"><img src="/testImage/ears_default4.png" width="108px" height="192px"/></button></li>
<li class="test"><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/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>