css позиция div

Question

Я просмотрел все и не могу найти правильный ответ. Эти 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> 

теперь я хочу класс «верхнее-левое», чтобы быть в левом верхнем углу «accordian_body» ДИВ и «topright», чтобы быть в правом верхнем углу. Проблема в том, что если я назначу им позицию: абсолютная, то они идут в верхнем правом углу страницы. Если я выбираю какой-либо другой тип позиционирования, он не работает.

Теперь, если я сделаю «accordian_body» установленным в положение: абсолютное, затем topright и topleft work. Проблема в том, что я создаю их все динамически, чтобы они не были абсолютными. Они должны быть созданы друг на друга и не оставлять атрибут позиции для этого неэффективно. Я обнаружил, что для «topleft» и «topright» я могу использовать float: left или right, и это работает, но если мне нужен текст или изображение сверху или снизу, мне пока не повезло.

Answer 1

Попробуйте установить position: relative для .accordion_body. Тогда абсолютно позиционированные элементы внутри него будут обращать внимание на этот контейнер, а не на любого предка, который они используют, не нарушая нормального потока вашего документа.

Answer 2

Сделать контейнер relative, то вы можете абсолютно поместить детей.

CSS

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