CSS div 位置答案

【问题标题】：css div positionCSS div 位置
【发布时间】：2012-06-12 21:53:03
【问题描述】：

我看了一遍，似乎找不到正确的答案。这些 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>

现在我希望类“topleft”位于“accordian_body”div 的左上角，而“topright”则位于右上角。问题是如果我给他们分配位置：absolute 那么他们就会离开页面的右上角。如果我选择任何其他类型的定位，它就不起作用。

现在，如果我将 "accordian_body" 设置为 position: absolute ，那么 topright 和 topleft 就可以了。问题是我正在动态创建它们，所以它们不能是绝对的。它们需要在彼此之上创建，并且没有任何位置属性可以完美地工作。我发现对于“topleft”和“topright”，我可以使用 float: left 或 right 并且可以，但是如果我想要文本或图像在顶部或底部，我到目前为止还没有运气。

【问题讨论】：

标签： html css css-position

【解决方案1】：

尝试将position: relative 设置为.accordion_body。然后，其中的绝对定位元素将关注该容器，而不是他们正在使用的任何祖先，而不会破坏文档的正常流程。

【讨论】：

【解决方案2】：

制作容器relative，然后就可以绝对定位孩子了。

CSS

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

【讨论】：