Html 如何正确定位我的img？

我做了一个小导航。如果单击加号，动画将开始并打开下拉菜单

但是，我不知道如何用css定位元素。我试过各种组合。有人知道我做错了什么吗

这是CSS：

body {
    background-image: url(bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}

html,body {
    height: 100%;
}

.aspectwrapper {
    display: inline-block;
/* shrink to fit */
    width: 100%;
/* whatever width you like */
    position: relative;
/* so .content can use position: absolute */
}

.aspectwrapper::after {
    padding-top: 56.25%;
/* percentage of containing block _width_ */
    display: block;
    content: '';
}

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
/* follow the parent's edges */
    outline: thin dashed green;
/* just so you can see the box */
}

#links {
    position: relative;
    left: 300px;
}

“链接”div是整个导航部分所在的div。我想我需要定位那个部门

这是HTML代码：

<div class="aspectwrapper">
    <div class="content">
        <div class="links">
            <ul>
                <li><a href="#ontwerp"><img height="20" src="1.png"></a></li>

                <li><a href="#object"><img height="20" src="2.png"></a></li>

                <li><a href="#bouwkunde"><img height="20" src="3.png"></a></li>

                <li><a href="#contact"><img height="20" src="4.png"></a></li>

                <li><a href="#winkel"><img height="20" src="5.png"></a></li>
            </ul>
        </div>
    </div>
</div>

---

我希望任何人都能帮助我

在您的CSS中，您已将links类定义为ID。因此，请更改：

#links {
    position: relative;
    left: 300px;
}

到

这是小提琴：

---

希望有帮助

我的回答解决了你的问题吗？

.links {
    position: relative;
    left: 300px;
}