позиция 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>

теперь я хочу, чтобы класс "topleft" находился в верхнем левом углу div "accordian_body", а "topright" - в правом верхнем углу. Проблема в том, что если я назначу им position: absolute, то они уйдут в правый верхний угол страницы. Если я выберу любой другой тип позиционирования, это не сработает.

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


html css css-position
person Scott Selby    schedule 12.06.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

person animuson    schedule 12.06.2012

arrow_upward
2
arrow_downward

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

CSS

.accordian_body {
    position: relative;
}
.topleft {
    position: absolute;
    top: 0;
    left: 0;
}
.topright {
    position: absolute;
    top: 0;
    right: 0;
}
person Tim Hobbs    schedule 12.06.2012