Html css分区位置

我已经找遍了，似乎找不到正确的答案。这些div都是从数据库动态创建的。前

<div class="accordian_header"><div class="title"> any title </div></div>
<div class="accordian_body">
    <div class="topleft"> info....</div>
    <div class="topright"> info...</div>
</div>

任何标题
信息。。。。
信息。。。

现在我希望类“左上”在“accorbian_body”div的左上角，“右上”在右上角。问题是，如果我给它们指定了位置：绝对，那么它们就会偏离页面的右上角。如果我选择任何其他类型的定位，它将不起作用

---

现在，如果我把“手风琴身体”设置为位置：绝对，那么右上和左上工作。问题是我在动态地创建它们，所以它们不能是绝对的。它们需要在彼此的顶部创建，并且不留下任何位置属性可以很好地实现这一点。我发现对于“topleft”和“topright”，我可以使用float:left或right，这很有效，但如果我想在顶部或底部显示文本或图像，我目前还没有运气。

将容器

设置为相对的

，那么您完全可以定位子容器

CSS

.accordian_body {
    position: relative;
}
.topleft {
    position: absolute;
    top: 0;
    left: 0;
}
.topright {
    position: absolute;
    top: 0;
    right: 0;
}

---

将容器设置为相对的，这样您就可以完全定位子容器

CSS

.accordian_body {
    position: relative;
}
.topleft {
    position: absolute;
    top: 0;
    left: 0;
}
.topright {
    position: absolute;
    top: 0;
    right: 0;
}

---

尝试为

设置
位置：相对
。手风琴体

。然后，其中绝对定位的元素将关注该容器，而不是它们使用的任何祖先，而不会中断文档的正常流程。

尝试设置

的
位置：相对
。accordion\u body
。然后，其中绝对定位的元素将关注该容器，而不是它们正在使用的任何祖先，而不会中断文档的正常流程